vue3.0初体验有哪些实用新功能

妖狐艹你老母 2022-04-02 09:14 168阅读 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][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 可以查看项目的浏览器兼容情况  
将需要支持的目标浏览器参数放在文件中就好

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&gt; 1%</td> 
   <td>全球超过1%人使用的浏览器</td> 
  </tr> 
  <tr> 
   <td>&gt; 5% in US</td> 
   <td>使用美国使用情况统计，接受两个字母的<a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements" rel="nofollow">国家/地区代码</a></td> 
  </tr> 
  <tr> 
   <td>&gt; 5% in my stats</td> 
   <td>使用<a href="https://github.com/browserslist/browserslist#custom-usage-data" rel="nofollow">自定义使用数据</a></td> 
  </tr> 
  <tr> 
   <td>last 2 versions</td> 
   <td>所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本</td> 
  </tr> 
  <tr> 
   <td>Firefox ESR</td> 
   <td>火狐最新版本</td> 
  </tr> 
  <tr> 
   <td>Firefox &gt; 20</td> 
   <td>指定版本范围</td> 
  </tr> 
  <tr> 
   <td>not ie &lt;=8</td> 
   <td>方向排除部分版本</td> 
  </tr> 
  <tr> 
   <td>Firefox 12.1</td> 
   <td>指定浏览器版本</td> 
  </tr> 
  <tr> 
   <td>since 2013</td> 
   <td>2013年之后发布的所有版本</td> 
  </tr> 
 </tbody> 
</table>

更多请查看官方文档

## 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 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器  
而且不需要我们手动去部署和设置什么，简直很贴心

*  现代版的包会通过 `<script type="module">` 在被支持的浏览器中加载；它们还会使用 `<link rel="modulepreload">` 进行预加载
 *  旧版的包会通过 `<script nomodule>` 加载，并会被支持 ES modules 的浏览器忽略
 *  一个针对 Safari 10 中 `<script nomodule>` 的修复会被自动注入

## 插件的添加 ##

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

## CLI 插件安装 ##

每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件  
对于这种cli插件需要加入@vue的前缀，这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint，然后从 npm 安装它，调用它的生成器

插件添加
    vue add @vue/eslint
    
    向被安装的插件传递生成器选项 (这样做会跳过命令提示)
    vue add @vue/eslint --config airbnb --lintOn save

## 第三方插件安装 ##

安装并调用 vue-cli-plugin-apollo，不带 @vue 前缀，该命令会换作解析一个 unscoped 的包
    执行此命令后src里会创建一个plugins文件夹，里面会自动生成关于插件的配置文件
    vue add axios
    
    基于一个指定的 scope 使用第三方插件，如果一个插件名为 @foo/vue-cli-plugin-bar，你可以这样添加它：
    vue add @foo/bar

# 配置修改 #

例：向所有 Sass 样式传入共享的全局变量  
在根目录新建一个vue.config.js，加入以下配置

module.exports = {
      css: {
        loaderOptions: {
          // 给 sass-loader 传递选项
          sass: {
            // @/ 是 src/ 的别名
            // 所以这里假设你有 `src/variables.scss` 这个文件
            data: `@import "@/variables.scss";`
          }
        }
      }
    }

虽然官方说这个文件会被 @vue/cli-service 自动加载，但如果你启动项目用的是npm run serve，那么你最好使用npx vue-cli-service serve重启一下

# 参考文章 #

官方文档 [https://cli.vuejs.org/zh/guide/][https_cli.vuejs.org_zh_guide]  
browserslist的github [https://github.com/browserslist/browserslist][https_github.com_browserslist_browserslist]  
[https://mp.weixin.qq.com/s/hfr2Q3FXZFIdqM\_r8HrLwQ][https_mp.weixin.qq.com_s_hfr2Q3FXZFIdqM_r8HrLwQ]

转载：https://www.jianshu.com/p/0d78ff9fe6ed

[https_router.vuejs.org_zh_guide_essentials_history-mode.html]: https://router.vuejs.org/zh/guide/essentials/history-mode.html
[https_cli.vuejs.org_zh_guide]: https://cli.vuejs.org/zh/guide/
[https_github.com_browserslist_browserslist]: https://github.com/browserslist/browserslist
[https_mp.weixin.qq.com_s_hfr2Q3FXZFIdqM_r8HrLwQ]: https://mp.weixin.qq.com/s/hfr2Q3FXZFIdqM_r8HrLwQ