[JavaScript知识库]Vue CLI脚手架

CLI(Command-Line Interface，命令行界面)，Vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

NPM(Node Package Manager)，NodeJS包管理和分发工具

//webpack全局安装
npm install webpack -g

Vue CLI的使用

安装Vue脚手架：

npm install -g @vue/cli

拉取2.x模板：

npm install -g @vue/cli-init

Vue CLI2初始化项目

vue init webpack 项目名称

Vue CLI3初始化项目

vue create 项目名称

runtimecomplier和runtimeonly区别：

//runtimecomplier  main.js
import Vue from 'Vue'
import App from './App'

Vue.config.productionTip=false

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

//程序运行过程：template->ast(abstract syntax tree抽象语法树)->?render->vdom->UI

//runtimeonly  main.js
import Vue from 'Vue'
import App from './App'

Vue.config.productionTip=false

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

//程序运行过程：render->vdom->UI

runtime-complier(v1)

runtime-only(v2)：性能更高；代码量更少

Vue CLI3