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

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 buildvue-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_ENVBASE_URL

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

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

public详细信息

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

    • <%= VALUE %> 用来做不转义插值;
    • <%- VALUE %> 用来做 HTML 转义插值;
    • <% expression %> 用来描述 JavaScript 流程控制
  • 静态资源被转移到public目录存放

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

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

cli3.x项目配置的不同(build目录删除)

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

  • publicPath

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

    • build构建的文件存放的目录
    • output.path,但只能修改outputDir,不能修改output.path
  • assetsDir 编译后,在outputDir目录中存放静态资源的目录

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

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

  • configureWebpack & chainWebpack

    • 这两个选项是用来配置webpack内容的,前者是合并对象,后者是链式调用
    • [cli3.6]webpackbuild代码压缩默认不开启,需要设置环境变量为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 servevue 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-routervuex

它们没有对应的插件,但是依旧可以使用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 - 2021 Keep It Simple And Stupid All Rights Reserved.

访客数 : | 访问量 :