vue-cli3快速搭建项目步骤

尤大大作为微博段子手，总是一般说放心放心半年内不会推出vue3.0，然后一边闷声放大招。vue-cli3出来有一段时间了，但是记性确实不太好，总是在搭建的时候需要找度娘，只好拿起小本本自己记录一番。

点此查看vue-cli3官方官网文档，两个小问题需要注意：

1. npm 更至最新
2. node >=8.9

vue create

---

运行命令快速创建项目

vue create books

图1

如果你第一次使用vue-cli3创建，会出现下面2个，如果选择保留了上次创建的记录作为快捷方式创建，就会出现第一个。按键盘上下键可以选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了，在这里我们选择手动来完成创建步骤。

图2

默认选择了babe和eslint，此处空格键是选中与取消，A键是全选。具体如下，可根据自己的业务进行选择(比较多的选择可能是router/vues/css/eslint)：

TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

图3

这里会选择css的预处理，给出了stylus/less/scss三种，根绝个人喜好，一般我用的是stylus。接着就是 eslint 规范的选择也是给出了3种选择，一般我们会选择最后一个，至于为什么安利最后一个，可以参考一篇不错的回答：使用ESLint+Prettier来统一前端代码风格。

图4

回车之后又会给你一个选择，语法的检查方式。第一个是保存时检查，第二个是fix和commit的时候检测，此处一般选择第一个。

图5

接下去会提示你配置文件的存放地方，第一个是独立文件夹位置，第二个是在package.json中。

图6

接下来会提示你是否保存这些配置下次进入直接使用，这里根据自己选择来决定。

扫描二维码关注公众号，回复： 6434259 查看本文章

图7

经过等待下载之后我们就已经成功完成了该项目的创建，接下来跟着提示走即可成功打开项目。