配置VUE项目-原创手记-慕课网

vue create project-name
备注：项目名称不可以有大写字母
please pick a preset ？

default(vue2 babel，eslint) //默认配置 vue2版本，基本配置包含 babel
default(vue3 babel，eslint) //默认配置 vue3版本，基本配置包含 babel
manually select features //手动配置（我选择的这一项）

备注：Babel 是javaScript 编译器，是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法。旧版本的babel配置文件叫 babel.config.js，新版本的配置文件叫 babel.config.json

? Check the features needed for your project:
(Press to select, to toggle all, to invert selection)

? Check the features needed for your project: 
(Press <space> to select, <a> to toggle all, <i> to invert selection)
//space选中，a全选，i反选
◉ Babel  
//转码器，可将ES6转为ES5
◉ TypeScript 
//TypeScript是一个JavaScript的超集,包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
◯ Progressive Web App (PWA) Support
// 渐进式Web应用程序 https://juejin.cn/post/6844903556470816781
◉ Router 
◉ Vuex 
◉ CSS Pre-processors 
//CSS预处理器如less，sass
◉ Linter / Formatter 
// 代码风格检查和格式化（如：ESlint）
◯ Unit Testing 
//单元测试
◯ E2E Testing 
//end to end测试

备注：

① https://juejin.cn/post/6844903556470816781

② E2E测试，即end to end测试，黑盒子测试的一种。vue上推荐两种框架，分别是nightwatch 和 cypress 。但是nightwatch 需要安装配置 selenium，selenium-server需要安装jdk，但 API丰富度更高。cypress 安装方便，测试写法和单元测试一致，只支持 Chrome 类浏览器，有自己的可视化窗体，能记录运行信息，重现 bug 。有支持其他浏览器的计划。TY系统用的是cypress。详细见：https://blog.csdn.net/qq_39300332/article/details/81197503

Use history mode for router?

有两种router模式，hash模式和history模式，选择hash模式。参考链接：
https://blog.csdn.net/cplvfx/article/details/107294535
https://www.jianshu.com/p/ae8f9c41a77c

Pick a CSS pre-processor

因为这次要配置sass相关的，所以我们在sass相关的选项选择，分别是ass/SCSS (with dart-sass) Sass/SCSS (with node-sass)。选择dart-sass。node-sass（底层是lib-sass），dart-sass。node-sass速度快、迭代慢。dart-sass大型项目速度较lib-sass慢1.5倍，但是更易于维护更新，官方主推。详细参考：https://blog.csdn.net/qianxing111/article/details/107617538

Pick a linter / formatter config?

选择 ESLint + Prettier 。Prettier 是一个格式化工具。之前看文章说有出现
eslint与prettier在函数前后的空格格式化冲突的，这时候可以修改prettier配置，配置为函数千年后的空格不格式化就不会冲突了

关于vue3版本的一些补充
1、Use class-style component syntax? (Y/n) y

是否使用Class风格装饰器？
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

2、 Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y

使用Babel与TypeScript一起用于自动检测的填充? yes

3、 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

In dedicated config files 在专用的配置文件中
In package.json 在package.json

————————————————
版权声明：本文为CSDN博主「fina_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/fxinn/article/details/118966922