安装

准备工作 ： vue cli环境要求node版本8或者更高（8.10.0+推荐） vue cli3 需要node版本>=8.9, （官方推荐：8.11.0+ ）

1.安装node

中文官方网站：http://nodejs.cn/download/

2.全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

3.安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）

npm install -g @vue/cli //或者 yarn global add @vue/cli

注意：mac系统下，由于用户权限问题，安装@vue/cli时可用

sudo npm install -g @vue/cli

这个命令，当然需要输入用户密码

npm安装比较慢，等待完成之后，查看vue版本

vue -V //或者 vue --version

搭建新项目

1.找一个自己喜欢的文件夹存放项目

vue create <文件名> //例如 vue create demo

2.接下来就是选一些配置项（上下箭头选择，空格选中、取消，回车确定）

2.1选择预设配置（这里我们选择Manually select features）

Default 是默认配置，如果选择Default，一直回车执行下去就行了

Manually select features 是自己手动选择

2.2选择自己常用的配置（每个选项已做解释）

2.3选择vue版本（这里我们选择3.x）

2.4选择路由模式（这里我们选择使用hash模式）

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

hash： 浏览器url址栏中的 # 符号（如：http://www.abc.com/#/hello，hash 的值为“ #/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面

history：利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法（需要特定浏览器支持），单页客户端应用，history mode 需要后台配置支持（详细参见：https://router.vuejs.org/zh/guide/essentials/history-mode.html）

2.5选择CSS预处理器（这里我们选择Less）

CSS预处理器主要为CSS解决浏览器兼容、简化CSS代码 等问题

Less最终会通过编译处理输出CSS到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)

2.6选择代码检测工具（这里我们选择ESLint + Prettier，最常用的）

提供一个插件化的javascript代码检测工具，可以检测出你代码中潜在的问题，保证写出的代码语法正确，风格统一

2.7选择何时检测语法（这里我们选择Lint on save）

Lint on save (保存时就检测)

Lint and fix on commit ( 用户提交文件到git的时候检测 )

2.8选择配置文件存放位置（这里我们选择In dedicated config files）

In dedicated config files（在专用配置文件中，就是单独管理）

In package.json（放在package.json里）

2.9是否保存本次配置为预置项（这里我们选择不保存）

如果你选择y那么下次搭建项目时就会出现你这一次配置的选项 ，就是上面第2.1条的选择项里面会有这项预置

回车确认之后就开始创建项目了

3.等全部下载完毕按照提示输入cd  <项目名>进入你的项目，然后npm run serve就可以启动项目了

4.最后我们看下启动后的项目目录和项目界面

启动完成后会生成两个地址（一个本地，一个线上），随便哪个都可以在浏览器打开项目了

项目目录

项目界面

至此整个VUE项目就通过Vue Cli3搭建完成啦