vue-cli vue脚手架开发(项目搭建)
1 、 安装vue-cli
确保电脑安装了node环境，输入以下命令检测是否安装了node
node -v //显示版本号说明安装了node 如果提示node不是内部命令，那就就去安装node
node的安装地址：https://nodejs.org/en/download/
npm install vue-cli -g //全局安装脚手架工具
如果电脑上安装了cnpm淘宝镜像，可以使用cnpm 安装
cnpm install vue-cli -g
如果没有淘宝镜像可以先安装淘宝镜像
npm install cnpm -g --registry=http://registry.npm.taobao.org
执行完毕 执行 cnpm/npm install vue-cli -g 该命令 安装脚手架工具
vue -V //显示版本号说明安装成功
2.9.6
2 、初始化vue项目
- 找到需要存储项目的目录
- 在该目录下执行命令
vue init webpack 项目名(英文)
downloading template // 下载模板中
? Project name (vuedemo) // 项目名 回车
? Project description (A Vue.js project) // 项目描述 回车
? Author // 作者 回车
? Vue build (Use arrow keys) // 使用哪种模式 方向键山下移动去选择， 回车键确定
❯ Runtime + Compiler: recommended for most users // 选择这个，回车
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific H
TML) are ONLY allowed in .vue files - render functions are required elsewhere
? Install vue-router? (Y/n) n // 安装vue-router 路由吗？ 我们现在输入n，以后讲了路由之后输入y 回车
? Use ESLint to lint your code? (Y/n) // 使用eslint检测代码吗？ 输入n 回车
? Set up unit tests (Y/n) // 是否建立单元测试，输入n 回车
? Setup e2e tests with Nightwatch? (Y/n) // 使e2e检测吗 输入n 回车
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys) // 项目创建成功之后是否使用npm install 安装项目所依赖的包
❯ Yes, use NPM // 使用npm包管理工具
Yes, use Yarn // 使用yarn包管理工具
No, I will handle that myself // 不需要，我自己将来选择 // 建议选择这个，后期用cnpm 安装依赖包
vue-cli · Generated "vuedemo".
# Project initialization finished!
# ========================
To get started: // 输入以下运行项目
cd vuedemo // 进入该目录
npm install (or if using yarn: yarn) // 安装项目所依赖的包！ 建议操作的时候使用 cnpm install
npm run dev // 启动项目 这里面不要使用cnpm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
// 执行以上命令，出现了 以下内容，说明项目已经成功运行在8080端口
Your application is running here: http://localhost:8080
3 、目录及文件介绍
myvue // 项目名称
--| build // 【目录】 打包的配置信息内容
--|---| build.js // 【文件】 打包的时候的配置
--|---| check-versions.js // 【文件】 版本检测文件
--|---| logo.png //【文件】 logo图片
--|---| utils.js //【文件】 工具文件
--|---| vue-loader.conf.js //【文件】 vue-loader配置 解析.vue格式文件
--|---| webpack.base.conf.js//【文件】 webpack的基础配置文件
--|---| webpack.dev.conf.js //【文件】 webpack在开发环境下的配置
--|---| webpack.prod.conf.js//【文件】 webpack在生成环境下的配置
--| config // 【目录】 配置文件目录
--|---| dev.env.js // 【文件】 开发环境配置
--|---| index.js // 【文件】 配置变量主文件 【重要！！！】 配置跨域在这里！
--|---| prod.env.js // 【文件】 生成环境配置
--| node_modules // 【目录】 项目依赖的包文件
--| src //【目录】 【重要！！！】开发目录，我们平时开发工作都在这个文件夹下面
--|---| assets // 这里存放的是css,图片等静态资源，但是会被webpack进行打包
--|---| components // 组件目录，可以删除被重构都行
--|---| App.vue // 重要！ 项目的根组件
--|---| main.js // 重要！ 项目的入口文件
--| static //【目录】 静态文件目录，这里的文件，webpack不会进行打包， 一般会在这里放一些静态的js，字体文件
--| .babelrc // 【文件】 babel的配置文件，解析es6语法
--| .editorconfig // 【文件】 编辑器的配置文件
--| .gitignore // 【文件】 git忽略的文件
--| .postcssrc.js // 【文件】 css的使用配置文件
--| index.html // 【文件】 【重要！！！】 单页面应用开发的那个唯一的HTML文件
--| package.json // 【文件】 包配置文件，这里有项目所依赖的所有包内容
--| README.md // 【文件】 说明文件
原文地址：https://blog.csdn.net/Hassanh/article/details/112870180
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。