vue-cli搭建项目学习

1、安装nodenode官网下载安装
2、安装vue-cli

npm install -g @vue/cli

3、打开终端，进入文件夹

npm create project//创建项目project，点击enter继续 

4、选择创建项目

选择配置方式

vue2是我之前创建项目环境用到的一些配置保存下来的，这里新手可以选择Manually select feature，自己手动配置
5、选择需要配置的，如Babel转码器（空格选中或取消选中）

配置

Babel：将ES6转码为ES5（因为有些浏览器对于ES6、ES7的语法无法识别，需要将其转换为ES5的语法）
TypeScript//开发语言中使用就需要选择，这里我们使用到的是js，
Progressive Web App (PWA) Support// 渐进式Web应用程序
Router // vue-router（vue路由）
Vuex // vue的状态管理模式
CSS Pre-processors // CSS 预处理器（如：less、sass）
Linter / Formatter // 代码风格检查和格式化（如：ESlint）
Unit Testing // 单元测试（unit tests）
E2E Testing // e2e（end to end） 测试

6、选择Vue版本

Vue版本

7、选择Vue-router是否使用History模式

Vue-Router模式

看到一篇关于Vue-Router的两个模式Hash和History不错的介绍，可参考Hash和History

8、选择CSS预编译器，我选个less来用用

选择CSS

node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。
9、代码检测Eslint

Eslint

10、选择测试框架

测试框架

Mocha + Chai //mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest //安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
11、选择配置文件建立方式，是单独生成文件还是在package.json中

文件生成方式

独立建文件

在package.json文件中配置

12、上面的配置是否需要保存一共下次构建项目直接使用，也就是类似于我在第4步所说的vue2是之前创建过的，选择yes则为该环境取个名字，下次直接使用

image.png

13、启动项目

启动项目

至此基本项目搭建完成！关于后续项目学习等将继续补充！
参考：vue搭建项目