8 Vue CLI相关
8.1 Vue CLI介绍
Vue CLI
- CLI:Command-Line Interface,命令行界面,俗称脚手架,命令行界面,
- 是Vue.js项目的脚手架
- 还用Vue CLI可以快速的搭建Vue开发环境以及对应的webpack配置
应用场景:开发大型项目,需要使用脚手架Vue-CLI
使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情
Vue CLI使用的前提-Node环境
vue cli是搭建vue开发环境和webpack配置,而webpack配置时依赖于node环境的的
安装步骤:
安装nodejs
检测安装的版本(默认情况下自动安装 node版本和npm),环境要求8.9以上
cnpm安装
由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm –registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:
cnpm install [name]
NPM:Node Package Manager
- 是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
Vue CLI使用前提- webpack
Vue.js官方脚手架工具就使用了webpack模板
- 对所有的资源会压缩等优化操作
- 它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。
webpack的全局安装(这里需要安装以前的3.6的版本)
npm install webpack -g
8.2 Vue CLI2的使用
安装操作
- 安装脚手架:如果你已经全局安装了旧版本的
vue-cli
(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g
或yarn global remove vue-cli
卸载它。或者清除c盘的npm-cache之后重新安装
1
npm install -g @vue/cli,注意这里安装的是vue-cli的脚手架3的版本如果需要想按照Vue CLI2的方式初始化项目时不可以的。
这里拉取vue CLI2.0的版本,通过桥接工具来继续使用vue cli2.0版本
npm install vue/cli-init
安装完成版之后查看当前版本
vue -version
- 安装脚手架:如果你已经全局安装了旧版本的
Vue CLI2初始化项目
- 创建
1
vue init webpack 项目名称
注意:
- 在使用中需要将ESLint(严格按照编码的格式编写,否则会报错),安装之后可以在config文件夹中的index.js文件中修改为false
useEslint: true,
- 开启服务器就打开网页选项
autoOpenBrowser: true,
- 在使用中需要将ESLint(严格按照编码的格式编写,否则会报错),安装之后可以在config文件夹中的index.js文件中修改为false
目录结构详情
- Vue CLI3初始化项目
1 | vue create 项目名称 |
js文件执行:
js文件执行的编译过程:js->字节码->浏览器解析
V8引擎可以直接跳过字节码环节到二进制代码,二进制代码时机制直接执行的代码,速度快
js文件执行的环境:
- 浏览器环境:chrom(V8引擎)/火狐/IE
- node环境:node是使用C++写的,内部也是V8引擎可以直接运行js文件通过node命令
运行:
npm run dev
8.3 Runtime-Compiler和Runtime-only的区别
应用场景
- 如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler
- 如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only,通过render进行模板渲染
render和template
render和template区别
- 相同点:直接替换掉el挂载的dom对象中的内容替换为自己的内容
- 不同点:
- 调用vue的运行方式不同,render->runtimeonly,template->runtimecompiler
- template需要通过component进行注册,render直接就可以使用
- 后期使用都使用.vue文件的runtimeonly的方式
Runtime-Compiler 和 Runtime-only
runtime-Complie中模板渲染流程:template -> ast(抽象语法书) -> render (转化为render函数)-> visual dom(虚拟dom) -> UI(转化为真实DOM)
Runtime-only:render -> visual dom -> UI(1.性能更高 2.下面的代码量更少)
.vue文件中的template是由vue-template-compiler(loader)来进行处理的
render函数详细解析
- render中传递过来的其实是一个createElement()的函数这里通过h进行接收
1
2
3
41.普通用法: createElement('标签', {标签的属性}, [''])
return createElement('h2',{class: 'box'},['Hello World', createElement('button', ['按钮'])])
2.传入组件对象:
return createElement(App)1
2
3
4
5
6
7
8
9
10
11
12new Vue({
el: '#app',
// components: { App },
// template: '<App/>'
render: function (createElement) {
// createElement的用法
// 1.普通用法: createElement('标签', {标签的属性}, [''])
// return createElement('h2', { class: 'box' }, ['hello vue', createElement('h3', { id: 'box1' }, ['box1show'])])
// 2.传入组件return createElement(组件名称)
return createElement(App)
}
})- 执行结果(普通方式)
vue程序的运行过程
- render函数的使用
- 后期使用都用runtimeonly->render函数
8.4 其他
- npm run build执行加载(项目构建生成环境下使用)
- npm run dev执行加载(开启本地服务器开发环境下使用)
- 修改配置:**webpack.base.conf.js**起别名
本文链接: https://sparkparis.github.io/2020/05/10/Vue%E7%AC%94%E8%AE%B05/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!