1.创建项目
vue create efficient ? ? ? ? ? ? ? ? ? ? ? ? ? ? // efficient 项目名称
Vue CLI v5.0.8 // # vue-cli脚手架的版本
? Please pick a preset: (Use arrow keys) // 请选择一个配置
? Default ([Vue 3] babel, eslint) // 默认配置,vue的版本是3.0, 默认安装了es6转es5,eslint代码格式化工具
Default ([Vue 2] babel, eslint) // 默认配置,vue的版本是2.0, 默认安装了es6转es5,eslint代码格式化工具
Manually select features // 手动选择,我们需要指定哪些插件安装,哪些不安装, 就可以选择手动
2.选择手动配置后,进行项目选项配置
Vue CLI v5.0.8
? Please pick a preset: Manually select features //请选择项目配置
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) // 选择你需要的配置放在项目里面,可以选择一个,也可以选择全部,按enter键结束
?? Babel // 转换工具,将es6转换成es5
? TypeScript // JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
? Progressive Web App (PWA) Support // 渐进式Web应用程序
? Router // vue-router（vue路由）
? Vuex // vuex（vue的状态管理模式）
? CSS Pre-processors // CSS 预处理器（如：less、sass）
? Linter / Formatter // 代码风格检查和格式化（如：ESlint）
? Unit Testing // 单元测试（unit tests
? E2E Testing // e2e（end to end） 测试
(1) 对于pwa的解释
????????一是给项目添加一些webapp支持，比如在手机端支持发送到桌面图标，根据不同平台和浏览器尝试去掉浏览器自带的地址栏、底栏实现全屏体验，这个主要是视觉上和体验上的，没有什么实际功能。
实现方式就是勾选pwa支持后项目会生成manifest.json,在里面配置即可
????????二是增加可离线支持。其实可离线也不一定非要用pwa，有不少其他手段。可离线就是比如你的项目不是一定要全程联网才能实现功能，只要用户访问过一次你的网站，下一次进入时哪怕没有网络，你的项目也不会白屏，而是照常运行或者开放部分功能，或者给个断网提示等等。对于那些功能性网站挺有用的，举例来说什么在线计算器，在线算税小工具等。
通过配置项目生成的registerServiceWorker.js来注册serviceworker实现，具体操作还是很复杂的，详情百度.
????????Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。PWA 的主要特点包括下面三点：可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现体验 - 快速响应，并且有平滑的动画响应用户的操作粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过 PWA Checklist 查看现有的特征。
?(2) 对于单元测试的理解
????????那些需要写单元测试,那些不需要写,取决于代码对数据的处理,当数据处理的复杂性较高的时候,需要用到单元测试,只有页面展示,并不需要单元测试
? ? ?https://juejin.cn/post/7039108357554176037
? ?(3)E2E单元测试
? ?https://blog.csdn.net/u012961419/article/details/123821205
(4).scss预处理https://www.jianshu.com/p/81aec65cccea
3. 选择vue的版本
? Choose a version of Vue.js that you want to start the project with
3.x
? 2.x
// 选择一个vue的版本
4.使用hash还是hitory路由
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)N
// 选择hash路由
5.选择css预处理的方式
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) // css预处理器 这里选择第一个Sass/SCSS (with dart-sass)
? Sass/SCSS (with dart-sass)
Less
Stylus
6.语法检测工具
? Pick a linter / formatter config: (Use arrow keys) // 语法检测工具
? ESLint with error prevention only // 仅错误预防
ESLint + Airbnb config // config Airbnb配置
ESLint + Standard config // config 标准配置
ESLint + Prettier // 该配置应该比较完善
7.语法检测方式
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed
?? Lint and fix on commit // 代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候，通过 githook，在 pre-commit 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范。
? Lint on save // 代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error
8.Where do you prefer placing config for Babel, ESLint, etc.?配置文件放在那里呢?
Where do you prefer placing config for Babel, ESLint, etc.?配置文件放在那里呢?
In dedicated config files //:独立文件
In package.json //: 放到package.json中
通常我们都选择独立的配置文件, 方便管理
9.Save this as a preset for future projects? (y/N) 是否将刚刚的配置保存到项目中?
如果选择是: 下次在配置选项的时候, 除了default,manually,还会多一个我们保存的项目配置.
- Y: 如果以后搭建项目都希望是这个配置就选择y
- N: 不希望保存配置
? 下次在创建项目的时候, 我们就可以自动选择之前保存的项目特征
**如果我们设置了很多自定义配置,如何取消呢?**
在/Users/用户名/.vuerc, 修改这个文件
{
"useTaobaoRegistry": false,
"presets": {
"mySet": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {}
},
"vueVersion": "2"
}
}
}
|