vue学习--- vue-cli 3.x

vue-cli更新到3.x之后，项目的创建也跟2.x有些区别，今天就介绍下3.x下如何配置一个项目。

vue-cli 2.x配置查看地址

1.安装

node >=8.9

更新到 3.x 之后，vue-cli 的包名从 vue-cli 改成了 @vue/cli

如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x)，首先需要使用以下命令卸载掉

npm uninstall vue-cli -g
# OR
yarn global remove vue-cli 

然后重新安装新版本的 @vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装成功后 vue -V 查看vue-cli的版本。

---

2.创建项目

(2.x 创建的方式是 vue init webpack xxx 而3.x的创建方式改变了 vue create xxxx)

这里我们选择第二项。
配置Manually select features

注意，空格键是选中与取消，A键是全选

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

勾选之后，使用回车键进入下一步

---

选择路由模式

yes 是 history 模式，no 是 hash 模式

萌新可以先从 hash 模式入手，不过实际项目通常采用 history 模式

---

选择一个合适 CSS 的预编译工具

都不熟悉的话就选 sass 或者 less，因为 stylus 不支持原生 CSS 写法。

后面还需要选择 ESLint 的校验规则，格式化的时机，和各个插件的配置项的位置，不熟悉的话就选第一个。

---

ESLint 的校验规则

---

选择语法检查方式

第一个是保存检测
第二个是fix和commit的时候检测

---

配置文件存放地方

第一个是独立文件夹位置
第二个是在package.json文件里

---

询问是否记录这一次的配置，以便下次使用，如一开始的时候会显示的vuecli3配置。

---

以下是最终的配置项

回车确定等待下载~~
装好后，启动
cd project2 // 进入到项目根目录
npm run serve // 启动项目

3.x的目录比2.x简洁了很多，没了build和config等目录。若需要其他配置则需要自己手动配置了

---

扩充：

因为本文主要介绍的是3.x版本的构架过程，如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具
npm install -g @vue/cli-init
vue init webpack my-project

---

vue-cli 3.x初始化项目的基本配置就先介绍到这里啦~~~