配置VUE项目

1. vue create project-name

   1. 备注：项目名称不可以有大写字母

2. please pick a preset ？ 

   1.  

      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

3. ? Check the features needed for your project: 
   (Press <space> to select, <a> to toggle all, <i> 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

4. Use history mode for router?

   1. 有两种router模式，hash模式和history模式，选择hash模式。参考链接：
      1.  https://blog.csdn.net/cplvfx/article/details/107294535
      2. 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