vue3.0初体验有哪些实用新功能
关于安装
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
npm install -g @vue/cli
安装完成后查看版本
vue --V
项目创建
关于项目创建，除了命令创建3.x还增加了图形化界面创建以及管理vue项目
在创建新项目时还可以混合选用多种集成
- TypeScript
- PWA
- Vue Router & Vuex
- ESLint / TSLint / Prettier
- 用 Jest 或 Mocha 进行单元测试
- 用 Cypress 或者 Nightwatch 进行 E2E 测试
使用命令创建
命令：vue create vueapp
1、使用上下箭头选择默认设置还是手动选择功能
Vue CLI v3.0.3
? Please pick a preset:
default (babel, eslint)
> Manually select features
2、按空格键选择你需要的功能，选完后按回车
babel：javascript转译器，将最新版的js语法（es6、es7）转换为现阶段浏览器可以兼容的js代码
typescript：使用 TypeScript 书写源码
PWA：渐进式WEB应用
Router：使用vue-router
Vuex：使用vuex
CSS Pre-processors：css预处理器
Linter / Formatter：代码规范标准
Unit Testing：单元测试
E2E Testing：e2e测试
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
>(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
3、router是否使用history模式，history需要服务器支持详，情请看这儿https://router.vuejs.org/zh/guide/essentials/history-mode.html
这里我就选no
4、css预处理器的选择，我习惯用sass
5、代码格式化检测选择，我用的是ide是vscode个人感觉搭配插件用着很舒服，所以我选Prettier
6、是否保存刚才的配置，下一次就不用重新配置了，我就直接回车
7、关于Babel, PostCSS, ESLint, etc.这些配置文件你是想放在package.json里面还是单独放在外面
编辑器一般默认会在项目根目录下寻找配置文件，这里我就直接回车选择In dedicated config files
8、是否保存为未来项目的预配置吗，我也是直接回车
最后配置如下
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
图形化界面
图形化操作非常方便，我就不一步步演示了，主要懒得贴图 (°ー°〃)
执行npm命令
vue ui
访问 http://localhost:8000 你就可以创建，管理，导入项目
实用新功能
- node_modules
- public
- src
- .browserslistrc
- .eslintrc.js
- .gitignore
- babel.config.js
- package.json
- postcss.config.js
- README.md
以上是项目根目录，3.x对比2.x文件结构明显精简了不少，多了一个public文件夹用于存放静态文件少了config、build等一系列的配置文件，这些配置文件都被放在了node_modules@vue文件下
browserslist
根目录中多了一个.browserslist文件，可以指定项目的目标浏览器的范围
用于转译的 JavaScript 特性和添加CSS 浏览器前缀，可以减少兼容代码提高代码质量
如果想少一个文件，你也可以在package.json中添加browserslist字段，参数是一个数组
这是默认设置，兼容所有最新版本，不支持ie8以下
> 1%
last 2 versions
not ie <= 8
使用 npx browserslist 可以查看项目的浏览器兼容情况
将需要支持的目标浏览器参数放在文件中就好
| 参数 | 说明 |
|---|---|
| > 1% | 全球超过1%人使用的浏览器 |
| > 5% in US | 使用美国使用情况统计，接受两个字母的国家/地区代码 |
| > 5% in my stats | 使用自定义使用数据 |
| last 2 versions | 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本 |
| Firefox ESR | 火狐最新版本 |
| Firefox > 20 | 指定版本范围 |
| not ie <=8 | 方向排除部分版本 |
| Firefox 12.1 | 指定浏览器版本 |
| since 2013 | 2013年之后发布的所有版本 |
更多请查看官方文档
vue-cli服务
在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。
你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令
启动
serve:vue-cli-service serve
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值：development)
--host 指定 host (默认值：0.0.0.0)
--port 指定 port (默认值：8080)
--https 使用 https (默认值：false)
build:vue-cli-service build
--modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。
--target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。
--report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小
现代模式
为了兼容那些不支持js新特性的浏览器我们需要Babel转译，但转译后的代码笨重冗长，这次3.x提供了一个现代模式
npx vue-cli-service build --modern
这个命令会产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器
而且不需要我们手动去部署和设置什么，简直很贴心
- 现代版的包会通过