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

 

 

四.实用新功能

 

  • 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文件下

 

 

五.图形化界面

 

执行npm命令
vue ui
访问 http://localhost:8000 你就可以创建,管理,导入项目

 

 

六.browserslist

根目录中多了一个.browserslist文件,可以指定项目的目标浏览器的范围
用于转译的 JavaScript 特性和添加CSS 浏览器前缀,可以减少兼容代码提高代码质量
如果想少一个文件,你也可以在package.json中添加browserslist字段,参数是一个数组

这是默认设置,兼容所有最新版本,不支持ie8以下
> 1%
last 2 versionsnot ie <= 8

使用 npx browserslist 可以查看项目的浏览器兼容情况
将需要支持的目标浏览器参数放在文件中就好


七.vue-cli服务

在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。
你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令
Vue CLI 项目有三个模式: development 模式用于启动,production 模式用于打包和e2e测试,test 模式用于unit测试

启动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 会根据构建统计生成报告,它会帮助你分析包中包含的模块们的大小

测试 test: vue-cli-service test:e2e  端到端测试         vue-cli-service test:unit  单元测试



八.总结   

  • 更快

  • 更小

  • 更易于维护

  • 更多的原生支持

  • 更易于开发使用


0点赞了文章

网友评论

0条评论

发表

网友评论

0条评论

发表

最新评论

推荐文章

彩龙

Copyright © 2008-2020 彩龙社区(https://www.clzg.cn) 版权所有 All Rights Reserved.

免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。

经营许可证编号:滇B2-20090009-7

下载我家昆明APP 下载彩龙社区APP