Vue3.0的一些新功能

Vue3.0的一些新功能

首先安装
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 app

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

3、router的history模式,history需要服务器支持,点击查看详情
4、css预处理器的选择
5、代码格式化检测选择
6、关于Babel, PostCSS, ESLint这些配置文件你是想放在package.json里面还是单独放在外面,编辑器一般默认会在项目根目录下寻找配置文件
7、是否保存为未来项目的预配置吗,可以选择直接回车

配置如下
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 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
图形化界面

简单操作,直接执行命令

vue ui
简单说一下新功能
  1. node_modules
  2. public
  3. src
  4. .browserslistrc
  5. .eslintrc.js
  6. .gitignore
  7. babel.config.js
  8. package.json
  9. postcss.config.js
  10. README.md

以上是项目根目录,3.x对比2.x文件结构明显精简了不少,多了一个public文件夹用于存放静态文件少了config、build等一系列的配置文件,这些配置文件都被放在了node_modules@vue文件下

.browserslist

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

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

现代模式

为兼容不支持js新特性的浏览器我们需要Babel转译,3.x提供了一个新的现代模式

npx vue-cli-service build --modern

这个命令会产生两个应用的版本:一个现代版的包,面向支持 ES modules 的现代浏览器,另一个旧版的包,面向不支持的旧浏览器
而且不需要我们手动去部署,非常实用

  • 现代版的包会通过< script type=“module”> 在被支持的浏览器中加载;它们还会使用 < link rel=“modulepreload”> 进行预加载
  • 旧版的包会通过 < script nomodule> 加载,并会被支持 ES modules 的浏览器忽略
安装插件

在已经创建好的项目中安装插件,使用vue add命令

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测试

启动
vue-cli-service serve
  open    服务器启动时打开浏览器
  copy    服务器启动时将 URL 复制到剪切版
  mode    指定环境模式 默认:development
  host    指定 host 默认:0.0.0.0
  port    指定 port 默认:8080
  https   使用 https 默认:false

打包
vue-cli-service build

  --modern 使用现代模式构建应用,为现代浏览器交付原生支持的 ES2015 代码,并生成一个兼容老浏览器的包用来自动回退。
  --target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。
  --report 和 --report-json 会根据构建统计生成报告,它会帮助你分析包中包含的模块们的大小

测试
 vue-cli-service test:e2e  端到端测试
 vue-cli-service test:unit  单元测试
配置问题

如在 Sass 样式传入共享的全局变量
需在根目录新建config.js,加入以下配置

module.exports = {
     
  css: {
     
    loaderOptions: {
     
      // 给 sass-loader 传递选项
      sass: {
     
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}
打包后的路径问题

在vue.config.js文件中加入’baseUrl: ‘./’'即可

module.exports = {
     
    baseUrl: './'
}

你可能感兴趣的:(Vue,Vue3.0,Vue3.0新功能,Vue3.0的配置问题,Vue3.0的创建)