什么是vue-cli ?
vue-cli是Vue.js官方脚手架命令行工具，我们可以用它快速搭建Vue.js项目，vue-cli最主要的功能就是初始化项目，既可以使用
官方模板，也可以使用自定义模板生成项目，而且从2.8.0版本开始，vue-cli 新增了build命令，能让你零配置启动一个Vue.js应用。
全局安装vue-cli
1.安装npm包管理工具
首先我们需要安装好npm包管理工具，npm是Node.js的默认包管理工具，通过npm可以安装、共享分发代码，管理项目依赖关系。
2.打开命令行工具
cmd、git bash、powershel(win10系统shift+鼠标右键打开)
以下步骤使用的都是cmd
3.安装vue-cli
方法一：npm install -g @vue/cli 全局安装使用npm
方法二：yarn global add @vue/cli 局部安装使用yarn
方法三：cnpm install -g @vue/cli
（该步骤安装时间有点长）
截图：
4.检查脚手架是否安装成功
vue -V (注意：这里的V是大写的，或者vue --version也可以)
如果出现版本号就说明安装成功了
截图：
搭建Vue项目
5.创建项目文件夹
vue create demo
cd demo
6.选择脚手架
上下按键选择，选择Manually select features，然后回车
（注意：不要选default默认配置选项
截图：
7.选择项目所需的功能
空格选中babel (可以在项目中使用ES5、ES6、ES7语法)
空格选中Router (可以在项目中使用路由)
空格选中Vuex (Vue的状态管理模式)
空格选中CSS Pre-process（CSS预处理）
空格选中linter/Formatter (代码格式化)
以上选项选中之后回车
截图：
8.路由是否默认模式
yes --> 回车
9.选择CSS预处理
注意：这里要选择Sass/SCSS(with dart-sass) --> 空格选中 -->回车
截图：
10.选择代码检查工具
空格选中ESlint + Standart config (标准配置) --> 回车
截图：
11.选择语法检查方式
空格选中 Lint on save (一保存就检查代码是否符合规范)
空格选中 Lint and fix on commit (执行命令npm run lint时自动更正错误的代码格式)
--> 回车
（尽量两个都选上，养成一种遵循代码规范的习惯）
截图：
12.选择配置保存的位置
空格选中In dedicated config files(把配置放在默认独立的文件里面)
--> 回车
截图：
13.下一次配置使用使用本次的配置
yes --> 回车 (不是必须)
14.给该配置取个名
15.配置完毕，慢慢等待下载完成吧
截图：
16.注意：如果在选择CSS预处理的时候不小心选择了Sass.SCSS(with node-sass)，有一次不就的机会
进入到项目的根目录demo --> 打开命令行工具cmd --> 执行命令：cnpm install --save node-sass
17.运行项目
方法一：
在项目根目录demo下打开命令行工具(或者直接使用Vscode的终端比较方便些) --> 执行命令：npm run serve
方法二：
修改package.json文件的“scripts”脚本：“serve”改为“start”
在项目根目录demo下打开命令行工具 --> 执行命令：npm start
截图：
或者：
此时项目已经运行起来啦！
18.浏览器打开
此时项目已经运行起来啦，浏览器访问localhost:8080
19.此时就可以写项目啦！！！
参考文献
vue官网：https://cn.vuejs.org/
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/4575.html
