Geeks_Z の Blog
Geeks_Z
2022-10-24
目录

vue-cli

vue-cli

vue-cli 起步

什么是 vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

  • 通过 @vue/cli 搭建交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service)，该依赖：
    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

CLI 是什么意思？

  • CLI 是 Command-Line Interface，即命令行界面，也叫脚手架。
  • vue cli 是 vue.js 官方发布的一个 vue.js 项目的脚手架
  • 使用 vue-cli 可以快速搭建 vue 开发环境和对应的 webpack 配置

vue cli 使用

vue cli 使用前提 node

vue cli 依赖 nodejs 环境，vue cli 就是使用了 webpack 的模板。

安装 vue 脚手架，现在脚手架版本是 vue cli3

npm install -g @vue/cli
1
2

如果使用 yarn

yarn global add @vue/cli
1
2

安装完成后使用命令查看版本是否正确：

vue --version
1
2

注意安装 cli 失败

  1. 以管理员使用 cmd
  2. 清空 npm-cache 缓存
npm clean cache -force
1
2

拉取 2.x 模板（旧版本）

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
1
2
3
4

1.在根目录新建一个文件夹16-vue-cli，cd 到此目录，新建一个 vue-cli2 的工程。

cd 16-vue-cli
//全局安装桥接工具
npm install -g @vue/cli-init
//新建一个vue-cli2项目
vue init webpack 01-vuecli2test
1
2
3
4
5
6

注意：如果是创建 vue-cli3 的项目使用：

vue create 02-vuecli3test
1
2

2.创建工程选项含义

https://gitee.com/geeks_z/MacImages/raw/master/202204071007887.png

  • project name：项目名字（默认）
  • project description：项目描述
  • author：作者（会默认拉去 git 的配置）
  • vue build：vue 构建时候使用的模式
    • runtime+compiler：大多数人使用的，可以编译 template 模板
    • runtime-only：比 compiler 模式要少 6kb，并且效率更高，直接使用 render 函数
  • install vue-router：是否安装 vue 路由
  • user eslint to lint your code：是否使用 ES 规范
  • set up unit tests：是否使用 unit 测试
  • setup e2e tests with nightwatch：是否使用 end 2 end，点到点自动化测试
  • Should we run npm install for you after the project has been created? (recommended)：使用 npm 还是 yarn 管理工具

等待创建工程成功。

注意：如果创建工程时候选择了使用 ESLint 规范，又不想使用了，需要在 config 文件夹下的 index.js 文件中找到 useEslint，并改成 false。

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
1
2
3
4
5

vue-cli2 的目录结构

创建完成后，目录如图所示：

https://gitee.com/geeks_z/MacImages/raw/master/202204071007117.png

其中 build 和 config 都是配置相关的文件。

build 和 config

https://gitee.com/geeks_z/MacImages/raw/master/202204071008919.png

如图所示，build 中将 webpack 的配置文件做了分离：

  • webpack.base.conf.js（公共配置）
  • webpack.dev.conf.js（开发环境）
  • webpack.prod.conf.js（生产环境）

我们使用的脚本命令配置在package.json中。

https://gitee.com/geeks_z/MacImages/raw/master/202204071007650.png

打包构建：

npm run build
1
2

如果搭建了本地服务器webpack-dev-server，本地开发环境：

npm run dev
1
2

此时npm run build打包命令相当于使用 node 执行 build 文件夹下面的 build.js 文件。

build.js

https://gitee.com/geeks_z/MacImages/raw/master/202204071007926.png

  1. 检查 dist 文件夹是否已经存在，存在先删除
  2. 如果没有 err，就使用 webpack 的配置打包 dist 文件夹

在生产环境，即使用 build 打包时候，使用的是webpack.prod.conf.js配置文件。

https://gitee.com/geeks_z/MacImages/raw/master/202204071007569.png

源码中，显然使用了webpack-merge插件来合并 prod 配置文件和公共的配置文件，合并成一个配置文件并打包，而webpack.dev.conf.js也是如此操作，在开发环境使用的是 dev 的配置文件。

config 文件夹中是 build 的配置文件中所需的一些变量、对象，在webpack.base.conf.js中引入了index.js。

const config = require('../config')
1

src 和 static

src 源码目录，就是我们需要写业务代码的地方。

static 是放静态资源的地方，static 文件夹下的资源会原封不动的打包复制到 dist 文件夹下。

其他相关文件

babelrc 文件

.babelrc 是 ES 代码相关转化配置。

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }
    ],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  1. browsers 表示需要适配的浏览器，份额大于 1%，最后两个版本，不需要适配 ie8 及以下版本
  2. babel 需要的插件

editorconfig 文件

.editorconfig 是编码配置文件。

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
1
2
3
4
5
6
7
8
9
10

一般是配置编码，代码缩进 2 空格，是否清除空格等。

eslintignore 文件

.eslintignore 文件忽略一些不规范的代码。

/build/
/config/
/dist/
/*.js
1
2
3
4
5

忽略 build、config、dist 文件夹和 js 文件。

gitignore 文件

.gitignore 是 git 忽略文件，git 提交忽略的文件。

postcssrc.js 文件

css 转化是配置的一些。

index.html 文件

index.html 文件是使用html-webpack-plugin插件打包的 index.html 模板。

package.json 和 package-lock.json

  1. package.json(包管理,记录大概安装的版本)
  2. package-lock.json(记录真实安装版本)

runtime-compiler 和 runtime-only 区别

新建两个 vuecli2 项目：

//新建一个以runtime-compiler模式
vue init webpack 02-runtime-compiler
//新建一个以runtime-only模式
vue init webpack 03-runtime-only
1
2
3
4
5

两个项目的 main.js 区别

runtime-compiler

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
})
1
2
3
4
5
6
7
8
9
10
11

runtime-only

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App),
})
1
2
3
4
5
6
7
8
9
10

render: h => h(App)

render:function(h){
  return h(App)
}
1
2
3
4

compiler 编译解析 template 过程

https://gitee.com/krislin_zhao/IMGcloud/raw/master/img/20200517154504.png

vm.options.template解析成ast(abstract syntax tree)抽象语法树，抽象语法树编译成vm.options.render(functions)render 函数。render 函数最终将 template 解析的 ast 渲染成虚拟 DOM（virtual dom），最终虚拟 dom 映射到 ui 上。

runtime-compiler template 会被解析 => ast(抽象语法树) => 然后编译成 render 函数 => 渲染成虚拟 DOM（vdom）=> 真实 dom(UI) runtime-only render => vdom => UI

1.性能更高，2.需要代码量更少

render 函数

render:function(createElement){
  //1.createElement('标签',{标签属性},[''])
  return createElement('h2',
    {class:'box'},
    ['Hello World',createElement('button',['按钮'])])
  //2.传入组件对象
  //return createElement(cpn)
}
1
2
3
4
5
6
7
8
9

h 就是一个传入的 createElement 函数，.vue 文件的 template 是由 vue-template-compiler 解析。

将 02-runtime-compiler 的 main.js 修改

new Vue({
  el: '#app',
  // components: { App },
  // template: '<App/>'
  //1.createElement('标签',{标签属性},[''])
  render(createElement) {
    return createElement('h2', { class: 'box' }, ['hello vue', createElement('button', ['按钮'])])
  },
})
1
2
3
4
5
6
7
8
9

并把 config 里面的 inedx.js 的useEslint: true改成 false，即关掉 eslint 规范，打包项目npm run dev，打开浏览器。

https://gitee.com/krislin_zhao/IMGcloud/raw/master/img/20200517154721.png

在修改 main.js

new Vue({
  el: '#app',
  // components: { App },
  // template: '<App/>'
  //1.createElement('标签',{标签属性},[''])
  render(createElement){
    // return createElement('h2',
    // {class:'box'},
    // ['hello vue', createElement('button',['按钮'])])
    //2.传入组件
    return createElement(App)
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

再次打包，发现 App 组件被渲染了。

https://gitee.com/krislin_zhao/IMGcloud/raw/master/img/20200517154741.png

vue-cli3

vue-cli3 起步

vue-cli3 与 2 版本区别

  • vue-cli3 基于 webpack4 打造，vue-cli2 是基于 webpack3
  • vue-cli3 的设计原则是"0 配置"，移除了配置文件，build 和 config 等
  • vue-cli3 提供vue ui的命令，提供了可视化配置
  • 移除了 static 文件夹，新增了 public 文件夹，并将 index.html 移入了 public 文件夹

创建 vue-cli3 项目

vue create 04-vuecli3test
1
2

目录结构：

https://gitee.com/krislin_zhao/IMGcloud/raw/master/img/20200517155055.png

  • public 类似 static 文件夹，里面的资源会原封不动的打包
  • src 源码文件夹

使用npm run serve运行服务器，打开浏览器输入 http://localhost:8080/

打开 src 下的 main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8

Vue.config.productionTip = false构建信息是否显示

如果 vue 实例有 el 选项，vue 内部会自动给你执行$mount('#app')，如果没有需要自己执行。

vue-cli3 的配置

在创建 vue-cli3 项目的时候可以使用vue ui命令进入图形化界面创建项目，可以以可视化的方式创建项目，并配置项。

vue-cli3 配置被隐藏起来了，可以在node_modules文件夹中找到@vue模块，打开其中的cli-service文件夹下的webpack.config.js文件。

https://gitee.com/krislin_zhao/IMGcloud/raw/master/img/20200517155115.png

再次打开当前目录下的lib文件夹，发现配置文件service.js，并导入了许多模块，来自与 lib 下面的 config、util 等模块

https://gitee.com/krislin_zhao/IMGcloud/raw/master/img/20200517155137.png

如何要自定义配置文件

在项目根目录下新建一个vue.config.js配置文件，必须为vue.config.js，vue-cli3 会自动扫描此文件，在此文件中修改配置文件。

//在module.exports中修改配置
module.exports = {}
1
2
#Vue
上次更新: 2025/02/26, 08:57:57
webpack
Promies

← Promies→

最近更新
01
RAIL
02-26
02
IOCTF
02-25
03
DGM
02-25
更多文章>
Theme by Vdoing | Copyright © 2022-2025 Geeks_Z | MIT License
京公网安备 11010802040735号 | 京ICP备2022029989号-1