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