Vue-cli使用

Vue-cli使用

现在使用前端工程化开发项目是主流的趋势，也就是说，我们需要使用一些工具来搭建vue的开发环境。一般情况下我们都会选择使用webpack进行项目的构建，在这里我们直接使用vue官方提供的，基于webpack的脚手架工具进行项目开发。

注意： 要求node.js版本是8+

安装方法

全局安装vue-cli:

npm install -g @vue/cli
or
yarn global add @vue/cli

提示：建议使用淘宝镜像下载
nrm ls : 查看镜像
nrm use taobao : 切换淘宝镜像

检测安装：

vue -V (@vue/cli 4.2.3)

最好安装4.0的版本

脚手架创建项目

vue create 项目名称

这里如果你是第一次使用脚手架进行项目创建的话，是只有两项提示。

第一项是默认配置，我们一般选择第二项自定义配置进行项目构建。

我们可以自由的选择哪些配置，按键盘上下键进行选中，安装。

选中哪一个，通过键盘空格键确定，所有的都选择完毕后，按键盘的Enter键进行下一步。

 ( ) Babel		项目里面是否需要支持 ES6、ES7 的新特性
 ( ) TypeScript		增强代码的建造性
 ( ) Progressive Web App (PWA) Support		谷歌离线存储的特性
 ( ) Router		路由生态
 ( ) Vuex		状态管理工具
 ( ) CSS Pre-processors		高效开发css代码
 ( ) Linter / Formatter		代码检查工具
 ( ) Unit Testing
 ( ) E2E Testing

是否使用历史模式的路由器?
这里我选择否。
选择你需要的sass（个人选择dart）

你更喜欢将Babel, ESLint等的配置放在哪里?(个人选择放在专用配置文件中)

是否把它作为未来项目的预置（选择y，以后开发项目用到的时候就不需要做以上步骤，系统自己帮你选择。选择n，下次开发项目需要重新执行以上步骤）

选择使用yarn安装或者npm安装（个人需求）。

需要注意的是：模板创建的时候会询问需要使用EsLint来标准化我们的代码规范，需要了解的可以参考下面链接。

https://www.cnblogs.com/mingjian/p/9361027.html

这样，我们就把所需要的 cli 项目创建好了，下面就可以使用了。

yarn serve ：启动项目 (如果是npm，需使用npm run serve启动)

最后，按照鼠标悬停出现的指令进行操作

就可以进入8080地址了，这样，我们就可以使用 vue-cli 工具了。