Vue脚手架的一些基本使用

Vue脚手架的一些基本使用

一、Vue-Cli 2 的使用

1.1 安装

npm I @vue/cli –g 进行全局安装

这样就安装好了vue-cli3

如果要用vue-cli2的话，需要再安装一个2的模板

npm I @vue/cli-init -g

1.2 vue-cli2的初始化

vue init webpack 项目名称

接着会有一些选项，无非是项目名称项目作者之类的，以及一些额外功能的选择，按照自己需要来选择即可

（注：其中有一个eslint 用于监控你的代码是否有遵循代码规范，如果你开了的话想关掉，可以去Config/index.js中有一个UseEslint属性，设置为false即可）

1.3 关于runtime-compiler与runtime-only

在我们用vue-cli脚手架生成模板时，会让我们选择runtime-compiler还是runtime-only，runtime-only会比runtime-compiler小6kb。

在这之前得先了解vue程序的运行过程：

Template -> ast （抽象语法树）-> render -> virtual DOM ->UI

而runtime-compiler便是使用这用运行模式，我们可以从它的main.js文件看出来

Template -> ast -> render -> virtual DOM ->UI

而编译template->ast这两步的代码，就叫做compiler

import Vue from 'vue'

import App from './App'  //导入模板



Vue.config.productionTip = false



new Vue({

 el: '#app',

 components: { App },  //注册模板

 template: '<App/>'    //使用模板

})

而runtime-only不同，它得结构是这样的

import Vue from 'vue'

import App from './App'  //导入模板



Vue.config.productionTip = false



new Vue({

 el: '#app',

 render:function(h){return h(App)}

})

可以看到，only中的代码少了template和components这两项，它是直接将模板编译为了render函数，所以，only的运行过程是 render -> vitual DOM ->UI,

可以看到，直接少了编译模板的部分，换句话说，便是少了compiler部分，所以Only的性能更高，而代码量却更少，only中的模板此时是由vue-template-compiler进行编译

Ps: function中的参数h，代表createElement()函数，等于于向html插入元素，而当我们往里面传入一个模板时，这个函数便会向html里插入这个模板

所以以后在开发中，一般都是用runtime-only

1.4 使用

当项目构建好之后，便可以通过

Npm run dev 来启动本地服务器

Npm run build 来打包程序

二、Vue – Cli 3

脚手架,用于构建最新的vue项目结构

2.1 安装

npm I @vue/cli –g 进行全局安装

这样就安装好了vue-cli3

2.2 vue-cli 3的初始化

通过命令 vue create 项目名称 来创建一个vue项目

和2不同，脚手架3的初始化界面相对于2来说有了明显的改变，最大的变化便是额外功能界面的可视化，不再是和2那样一项一项确认，而是直接让你选择自己需要的功能，但是内容其实和2是差不多的

2.3 使用

当项目构建好之后，便可以通过

Npm run serve 来启动本地服务器

Npm run build 来打包程序