vue2.x笔记8-Vue CLI

最新推荐文章于 2024-08-30 20:29:15 发布

notChange

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量104

点赞数

分类专栏： vue 文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/notChange/article/details/123083899

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

什么是Vue CLI

如果只是写简单的demo程序，不需要Vue CLI

如果开发大型项目，必然要使用Vue CLI

使用Vue.js开发大型项目时，需要考虑代码目录结构、项目结构和部署、热加载等事情
如果每个项目都需要手动完成这些工作，效率太低，所以通常会使用脚手架工具来帮助完成

CLI是什么意思？

CLI是Command-Line Interface，翻译为命令行界面，俗称脚手架
Vue CLI是官方发布Vue.js的项目脚手架
使用Vue CLI可以快递搭建Vue开发环境及对应的webpack配置

脚手架的样子

Vue CLI使用前提

Node

安装NodeJS

直接官网中下载安装 http://nodejs.cn/download/

检测安装的版本

Node环境要求8.9以上或更高版本

什么是NPM

NPM的全称是Node Package Manager
是一个NodeJS包管理和分发工具
开发过程中会经常使用NPM来安装依赖包

webpack

Vue CLI使用了webpack模板

对所有的资源会进行优化操作
在开发过程中提供了一套完整的功能，使开发变得高效

webpack的全局安装

npm install webpack -g

Vue CLI的使用

安装Vue脚手架

npm install @vue/cli -g

现在安装的是Vue CLI3版本，想要使用Vue CLI2只需要拉取2.x模板

Vue CLI2初始化项目

vue init webpack my-project

Vue CLI3初始化项目

vue create my-project

Vue CLI2

创建项目

目录结构详解

Runtime-Compiler和Runtime-only的区别

在创建项目时，Vue build有两个选项：Runtime + Compiler和Runtime-only

Runtime + Compiler：建议大多数用户使用

Runtime-only：比上面那种模式轻大约 6KB min+gzip，但是 template (或任何特定于vue的html)只允许在.vue文件中使用，其他地方用render函数

用两种模式生成项目，主要区别就在于main.js文件

从图中可以看出，区别就在于Vue实例中一个用tempalte+components，一个用render函数

为什么存在这样的差异呢？

需要先理解Vue应用程序是如何运行起来的
Vue中的模板如何最终渲染成真是的DOM
看下面这幅图

runtime+compiler和runtime-only的区别：

runtime+compiler的运行过程：template -> ast -> render -> vdom -> UI
runtime-only的运行过程：render -> vdom -> UI
runtime-only比runtime+compiler轻，代码量更少
runtime-only性能更高，运行更快（runtime-only省略了template -> ast -> render的运行过程）
runtime-only只能识别render函数，不能使用template，.vue文件中的template是由vue-template-compiler处理的

render函数

普通用法：createElemrnt('标签', {标签的属性(可以不传)}, ['内容数组'])

new Vue({
  el: '#app',
  render: function(createElement) {
    // 基本使用
    return createElement('h2', {class: 'box'},['hello world'])
    // 嵌套使用
    return createElement('h2', 
    {class: 'box'},
    ['hello world', createElement('button',['按钮'])])
  }
})

传入组件用法

const cpn = {
  template:`<div>{{msg}}</div>`,
  data() {
    return {
      msg: '我是组件cpn'
    }
  }
}

new Vue({
  el: '#app',
  render: function(createElement) {
    return createElement(cpn);
  }
})