前言

本文将介绍Vue-CLI的使用。


Vue-CLI

介绍

CLI:Command-Line Interface,俗称脚手架

使用Vue-CLI可以快速搭建Vue开发环境以及对应的webpack配置。

注意:以下内容主要介绍CLI2和CLI3.

使用前提:需要NodeJSWebpack

基本使用(CLI2)

安装

在终端键入如下命令(注意指定版本号)进行全局安装:

1
npm install @vue/cli -g

如果想按照Vue-CLI2的方式初始化项目需要安装2.x的模板,在终端键入如下命令(注意指定版本号):

1
npm install @vue/cli-init -g

初始化项目

在终端键入命令:

1
vue init webpack projectname

这里进行Vue-CLI2的项目展示:

创建项目时会遇到如下选项:

  • 创建时的项目名称:会根据该名称创建项目文件夹,存放之后的项目内容。不能包含大写字母等。

  • Project name:可以设置,默认为创建时的项目名称。

  • Project description:默认为A Vue.js project

  • Author:作者的信息,默认从.gitconfig文件中读取。

  • Vue build:有两种构建版本可选择(runtime-compilerruntime-only)。

  • Install vue-router:选择是否创建路由。

  • Use ESLint to lint your code:是否选择ESLint检测代码规范。

    如果安装了之后想取消规范检测,在config文件夹下的index.js中,找到uesEslint选项,将其设置为false。

  • Set up unit tests:是否添加单元测试。

  • Setup e2e test with Nightwatch:e2e(end-to-end)测试。

    安装Nightwatch,是一个利用seleniumwebdriverphantomjs等进行自动化测试的框架。

  • Should we run 'npm install' ...:选择两种安装方式。

最后敲击回车,自动开始创建项目。

项目目录结构

  • package.json文件

    如之前配置一样:

    执行npm run dev/start运行服务器,执行npm run build进行项目打包

  • buildconfig文件夹定义了一些变量,包括开发时和打包发布时的不同配置。

  • node_modules文件夹存放的就是项目依赖的一些模块。

  • src文件夹存放的就是项目的代码。

  • static文件夹存放一些静态资源,打包后该文件夹的内容会“原封不动”地复制到输出文件夹dist中。

    以图片资源为例,不会重命名,不会转为base64编码。

  • .babelrc文件:ES代码相关转化配置。

  • .editorconfig文件:项目文本相关配置。

  • .eslintignore文件:对指定文件夹下的代码做ESLint检测的忽略。

  • .gitignore文件:Git仓库忽略的文件夹配置。

  • .eslintrc.js文件:代码检测配置的内容(如果安装了ESLint)。

  • .postcssrc.js文件:进行css转化时的一些配置。

  • index.html文件:模板。

项目运行

启动服务器:

1
npm run dev/start

项目打包:

1
npm run build

runtime-compiler与runtime-only的区别

main.js

直接看两种不同构建版本项目的main.js文件。

runtime-compiler

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

runtime-only

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
el: '#app',
render: h => h(App)
})

很明显可以看到二者App的使用方式不同:

  • runtime-compiler:首先在components中注册组件,然后template使用模板
  • runtime-only:并没有注册App,直接利用render属性(本质是一个函数),利用一个“箭头函数”进行使用。

首先要理解Vue程序运行过程:

  1. 当把一个模板(template)传入Vue实例中,Vue会将其保存至Vue实例下的一个options
  2. 然后将其进行解析(parse)称为ast(abstract syntax tree,抽象语法树)
  3. 对ast进行编译(compile)成一个render函数
  4. 通过render函数把对应的模板翻译成虚拟DOM树(virtual dom)
  5. 最后把虚拟DOM树渲染成真实的DOM(UI)

runtime-compiler会经历上述的一系列步骤:

template → ast → render → 虚拟DOM → UI

runtime-only只经历三步:

render → 虚拟DOM → UI

由此分析得出结论:

  1. runtime-only的性能更优

  2. runtime-only的代码量更少

render函数

下面来介绍一下render函数究竟是为何物。

实际上render属性的写法如下,这里会涉及到createElement函数(就是h):

用法一:

createElement('标签', {标签的属性}, [标签的内容])

1
2
3
render: function (createElement) {
return createElement('h2', {class: 'box'}, ['Hello CLI'])
}

注意:标签内容的数组可以嵌套新的createElement函数。

运行效果如下:

用法二:传入组件对象

例如创建如下cpn组件:

1
2
3
4
5
6
7
8
const cpn = {
template: `<div>{{message}}</div>`,
data() {
return {
message: '我是组件的信息'
}
}
}

createElement函数中直接传入该组件对象:

1
2
render: function (createElement) {
return createElement(cpn)

运行效果如下:

如此一来就不难理解,最初可以直接传参App了:

1
2
render: function (h) {
return h(App)

等同于:

1
render: h => h(App)

Vue CLI3

Vue CLI3与2版本的区别:

  • vue-cli3是基于webpack4打造,vue-cli2是webapck3
  • vue-cli3的设计原则是“0配置”,移除的配置文件根目录下的buildconfig等目录(做了隐藏设计)
  • vue-cli3提供了vue ui命令,提供了可视化配置
  • 移除了static文件夹,新增了public文件夹,并且index.html文件移动到其中

初始化项目

在终端键入命令:

1
vue create projectname

创建项目时会遇到如下选项:

  • Please pick a preset:有两个选项(默认(babel、eslint)和手动)

    如果选择手动配置,会出现诸多选项,按空格键选择/取消。

  • 针对于Babel、PostCSS、ESLint等配置选择新建配置文件存放或是存放至package.json文件

    一般情况选择前者,单独创建新的配置文件。

  • 是否将刚刚手动配置创建一个新的preset

    如果选择Yes会让你起一个名字,并且选择Yarn或者NPM

    如果想要删除手动创建的preset,找到.vuerc文件中的presets属性,在其中进行删除,保存。

项目目录结构

Vue CLI3的目录结构交Vue CLI2要简单许多,需要注意的就是public文件夹,可以把它类比为2版本中的static文件夹。

项目运行

启动服务器:

1
npm run serve

项目打包:

1
npm run build

main.js

Vue CLI3中的main.js文件内容如下:

1
2
3
4
5
6
7
8
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

实际上跟之前的el: '#app'挂载没有区别,el挂载也会执行mount('#app')

Vue项目管理器(UI)

在终端键入如下命令:

1
vue ui

则会启动一个本地服务,运行在8000端口,展示Vue项目管理器(如下图):

导入一个项目:

这里就可以利用可视化界面安装插件和依赖,还可以进行项目配置信息的修改。

修改配置

如果需要手动修改一些配置信息,由于buildconfig文件夹被取消,因此需要手动在项目根目录创建文件:

vue.config.js(固定文件名,不得修改),在其中手动添加配置信息:

1
2
3
module.exports = {

}

添加的配置信息会自动与原有的进行合并,作为整体的配置。


后记

基本很少使用图形化界面。

Vue CLI3中会在项目根目录下自动创建git,方便项目管理。