Vue CLI
什么是Vue CLI
写几个Vue的Demo程序, 那么不需要Vue CLI.
如果开发大型项目, 那么需要, 并且必然需要使用Vue CLI
使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。
CLI是什么意思
CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
Vue CLI是一个官方发布 vue.js 项目脚手架
使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.
Vue CLI使用前提 - Node
Node环境要求8.9以上或者更高版本
cnpm安装
由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:
cnpm install [name]
Vue CLI使用前提 - Webpack
Vue.js官方脚手架工具就使用了webpack模板
对所有的资源会压缩等优化操作
它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。
Webpack的全局安装
npm install webpack -g
Vue CLI的使用
安装Vue脚手架
//这里我室使用cnpm安装了3.2.1版本
cnpm install -g @vue/cli@3.2.1
上面安装的是Vue CLI3
的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。
这样就能使用vue cli2.x版本了
Vue CLI2初始化项目
vue init webpack my-project
Vue CLI2详解
PS E:\project\vs project\Vue\模块化\webpack\vue\cli2> vue init webpack my-project
? Project name learn-vue-cli2 //项目名称 不能包含大写
? Project description vuecli2 //项目描述
? Author xy <210871791@qq.com> //作者信息 会默认从git中读取信息
? Vue build runtime //采用的模板 见后续
? Install vue-router? No //vue路由 后面自己安装
? Use ESLint to lint your code? No //检测代码规范 看自己情况
? Set up unit tests No // 单元测试
? Setup e2e tests with Nightwatch? No //e2e测试 end yo end
? Should we run `npm install` for you after the project has been created? (recommended) npm
cli2目录结构详解
Runtime-Compiler和Runtime-only的区别
在之后的开发中,依然使用template,就需要选择Runtime-Compiler
之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only
Runtime-Compiler和Runtime-only中的main.js代码对比
Runtime-Compiler的main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
Runtime-Only的main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})
为什么存在这样的差异呢?
需要先理解Vue应用程序是如何运行起来的。
Vue中的模板如何最终渲染成真实DOM。
我们来看下面的一幅图。
Vue程序运行过程
Runtime-Compiler过程
template模板 解析成 ast抽象语法树 编译成 render函数 渲染成 vdom虚拟的dom -> UI界面
Runtime-Only过程(1.性能更高 2.下面的代码量更少)
render函数 渲染成 vdom虚拟的dom -> UI界面
总结
所以使用Runtime-Only省去了前三步
直接使用render函数渲染成虚拟dom在展示到UI界面中
这就是为什么Runtime-Only比Runtime-Compiler轻6kb的原因
另外,vue-template-compiler会把template模板解析编译成render函数
最后render: h => h(App)
这里的APP是个组件对象 APP里面没有关于template的任何东西,因为都被编译成了render函数
render函数的使用
1.普通用法: createElement(‘标签’, {标签的属性}, [’’])
render: function (createElement) {
return createElement('h2',
{class: 'box'},
['Hello World',
//可以嵌套
createElement('button', ['按钮'])])
}
2.传入组件对象:
const cpn = {
template: '<div>{{message}}</div>',
data() {
return {
message: '我是组件message'
}
}
}
new Vue({
el: '#app',
render: function(createElement) {
return createElement(cpn)
}
})
npm run build
npm run dev
Vue CLI3与 2 的版本区别
vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化
移除了static文件夹,新增了public文件夹,并且index.html移动到public中
Vue CLI3初始化项目
vue create my-project
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: xiaoY
cli3目录结构详解
UI方面的配置
启动配置服务器:vue ui
build和config等目录下的一大堆配置文件去哪里了?
自定义配置:起别名
新建vue.config.js并导出 会自动合并 再加入git中进行管理