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搭建项目
网友评论