Vue CLI 3.x 与 2.x的区别

Vue 阅读量

Vue CLI 3.x 与 2.x的区别

主要区别

  • 安装与项目构建
  • 项目目录变化
  • 项目配置变化

安装&项目构建

CLI安装

1
2
3
4
5
6
# cli 2.x 
npm install -g vue-cli

# cli 3.x 
# 3.x 安装时，如果之前安装了2.x需要卸载2.x再安装
npm install -g @vue/cli

项目构建

cli2.x

1
2
3
vue init <template-name> <project-name>
npm i 
npm run dev

cli3.x

  • 安装新增TypeScript配置选项
  • 新增图形化安装方法
  • 保留了2.x之前的安装方法
1
2
3
4
5
6
7
8
9
vue create hello-world
npm i
npm run serve
# 使用vue ui创建新项目(3.x新增)
vue ui
# 使用旧版（2.X）创建
npm install -g @vue/cli-init
# 'vue init'的运行效果与‘vue-cli@2.x’相同
vue init webpack projectname

3.x后目录结构变化[替换2.x功能的新特性]

config目录删除，使用模式的.env文件代替[模式]

cli3新增模式概念，每个模式在项目中都有对应的配置文件，项目启动时，对应的文件就会加载，与环境变量不同，一个模式可以包括多个环境变量

  • Vue CLI 项目默认有三个模式：

    • development 模式用于 vue-cli-service serve
    • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
    • test 模式用于 vue-cli-service test:unit

  • 模式需要在启动项目时使用–mode指定

1
NODE_ENV=development npm run serve --mode mymode # 模式包含多个环境变量
  • 每个模式有多个环境变量，cli3.x为模式与环境变量指定了一个.env配置文件
1
2
3
.env # 所有环境
.env.mode # mode模式加载的配置文件[优先级高于.env]
.env.mode.development # mode模式下，development环境所加载的配置文件[优先级最高]
  • .env文件详细信息
    • 这些文件是用来代替config目录的
    • 以VUE_APP_开头的变量可以再代码中通过process.env访问，其他的变量不可访问
    • process.env始终含有两个特殊变量NODE_ENV和BASE_URL

删除static目录[新增public目录]

删除了static目录，它的静态资源转移到public目录中，通过/xx.xx可以直接访问

public详细信息

  • index.html入口文件从根目录转到public目录下，它拥有3个特殊插值

    • <%= VALUE %> 用来做不转义插值；
    • <%- VALUE %> 用来做 HTML 转义插值；
    • <% expression %> 用来描述 JavaScript 流程控制

  • 静态资源被转移到public目录存放

  • cli3项目的静态资源有两种处理方式

    • 在JavaScript或template/css(vue)中通过相对路径导入。这类资源会被webpack处理（不在public目录）
    • 放在public目录或者使用绝对路径被导入的静态资源。这类资源会被直接拷贝，不会经过webpack处理

cli3.x项目配置的不同（build目录删除）

2.x版本的项目配置是在config和build中完成，但是，到了3.x版本，这两个目录都被删除，如果需要自定义配置，需要自己新建vue.config.js文件

  • publicPath

    • 部署应用包时的基本URL，即webpack的output.publicPath
    • 但，vue项目中其他地方会用到publicPath，所以不要修改webpack的output.publicPath

  • outputDir

    • build构建的文件存放的目录
    • 即output.path，但只能修改outputDir，不能修改output.path

  • assetsDir 编译后，在outputDir目录中存放静态资源的目录

  • lintOnSave 配置eslint后，是否每次保存lint代码，默认启动

  • runtimeCompiler 是否使用包含运行时编译器的 Vue 构建版本，默认不启动

  • configureWebpack & chainWebpack

    • 这两个选项是用来配置webpack内容的，前者是合并对象，后者是链式调用
    • [cli3.6]webpack的build代码压缩默认不开启，需要设置环境变量为production才会开启

  • devServer 支持所有webpack-dev-server选项

    • 配置项目端口、域名 host、port、https
    • 配置项目跨域代理 proxy
1
2
3
4
5
6
module.exports = {
  port: 8100,
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

新增功能特性

快速原型开发

在cli3.x中可以使用vue serve 和vue build命令对单个*.vue 文件进行快速原型开发

安装全局依赖

1
npm install -g @vue/cli-service-global

vue serve 运行文件

1
2
3
4
5
6
7
vue serve myComponent.vue 
Usage: serve [options] [entry]
在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
Options:
  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息

vue build 编译文件

1
2
3
4
5
6
7
8
vue build myComponent.vue 
Usage: build [options] [entry]
在生产环境模式下零配置构建一个 .js 或 .vue 文件
Options:
  -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
  -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
  -d, --dest <dir>       输出目录 (默认值：dist)
  -h, --help             输出用法信息

图形化界面

vue cli3 新增一个UI图形化管理页面，可以通过它新建项目、管理原有项目的插件

创建新项目

1
vue ui # 启动图形化界面

管理原有项目（包括2.X项目）

  • 插件管理（更新，查看）（3.x）
  • 依赖（module）管理（删除、安装、更新、查看）（2.x、3.x）
  • 项目配置修改 （3.x）
  • 项目任务（项目script命令启动、停止操作）（2.x、3.x）

cli插件

什么是插件

  • vue cli3.x使用了一套基于插件的架构，cli的相关依赖都是以@vue/cli-plugin-开头的
  • 插件可以修改内部的 webpack 配置，也可以向 vue-cli-service 注入命令
  • 在项目创建的过程中列出的特性，绝大部分都是通过插件来实现的

vue add 插件的安装

cli3.x项目提供了vue add命令来安装插件

1
vue add @vue/cli-plugin-eslint

特殊的vue-router和vuex

它们没有对应的插件，但是依旧可以使用vue add在项目中添加它们

1
2
vue add router
vue add vuex

配置文件样例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: '/',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.VUE_APP_NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  },
  // 解析别名处理
  chainWebpack: config => {
    config.resolve.alias
      .set('@img', resolve('src/assets/img'))
      .set('@c', resolve('src/components'))
      .set('@m', resolve('src/mixins'))
      .set('@v', resolve('src/views'))
      .set('@s', resolve('src/store'))
  },
  // 配置高于chainWebpack中关于 css loader 的配置
  css: {
    // 是否开启支持 foo.module.css 样式
    modules: false,
    // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中
    extract: true,
    // 是否构建样式地图，false 将提高构建速度
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        // options here will be passed to postcss-loader
      }
    }
  },
  devServer: {
    port: 8010
  }
}

参考

Powered by Hexo and Hexo-theme-hiker

Copyright © 2017 - 2023 Keep It Simple And Stupid All Rights Reserved.

访客数 : | 访问量 :