vue cli 4.0.5 的使用

现在的 vue 脚手架已经升级到4.0的版本了，前两日vue 刚发布了3.0版本，我看了一下cli 4 和cli 3 没什么区别，既然这样，就只总结一下vue cli 4 的项目搭建吧，回顾一下。

1. 创建项目

对应的命令：vue create 项目名

2. 手动选择配置选项

这里我们一般选择手动配置

这里一般我们选择手动配置

3.选择需要的依赖

在这里插入图片描述

这里的话按住空格就是选择，全选的话就是按住a
? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试

4. 选择是否使用history router模式

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。 我这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。 选yes的话需要服务器那边再进行设置。Use history mode for router? (Requires proper server setup for index fallback in production)

选择是否使用history router模式

5. 选择css 预处理器

选择css 预处理器

6. 选择Eslint 代码验证规则

选择Eslint 代码验证规则

6.2 选择什么时候进行检测

选择什么时候进行检测

7.选择单元测试

这个需要根据自己的情况而定

选择单元测试

8.选择如何存放配置

这个一般都是独立放置，这样后期可以更方便的更改。

选择如何存放配置

9.选择是否保存当前的配置

一般我是不保存的，因为根据项目的不同，相应的配置也会不同

选择是否保存当前的配置

10. 等待创建项目中

等待创建项目中

创建成功

11. 成功后就可以访问了

在这里插入图片描述

在这里插入图片描述

---

原文出处vue cli 4.0.5 的使用