Vue Cli 入门笔记

(一) Vue Cli 概述

Vue Cli: Vue Command-Line Interface(命令行界面), 是一个基于 Vue.js 进行快速开发的完整系统, 俗称 脚手架. 它可以快速搭建Vue开发环境以及对应的webpack配置

(二) Vue Cli 安装

Vue Cli使用依赖着node(8.9以上版本)环境, 而node环境运行需要各种依赖的包, 为了简化手动管理包的成本, 诞生npm工具(node package manager 软件包管理工具).

1. node 安装

node下载链接: https://nodejs.org/zh-cn/download/

查看安装的node版本: cmd中输入命令 node -v

2. Webpack 安装

参考博主写的另一篇文章: Webpack入门笔记

3. Vue Cli 安装

终端执行全局安装命令:

npm install @vue/cli -g

查看Vue Cli版本:

vue --version

拉取Vue Cli 2.x模板 (旧版本): Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init

此时你既可以使用Vue Cli2, 也可以使用Vue Cli3

# Vue Cli2 初始化项目
vue init webpack 项目文件名

# Vue Cli3 初始化项目
vue create 项目文件名

(三) Vue Cli2 基本使用

终端执行命令: vue init webpack vuecli2learn




Vue Cli2 目录结构解析

终端进入项目文件目录执行

npm run dev

访问终端上的地址

(四) Vue Cli3 基本使用

终端执行命令: vue create vuecli3learn



Vue Cli3 目录结构解析

Vue Cli3 的设计原则是 “0配置”, 查看配置文件和修改的方式:

• 执行Vue Cli3特有指令, 提供了一个 GUI 的 webpack Analyzer(网页). 查看和修改配置文件

  vue ui
  

  导入项目
  
  查看/修改 项目安装的插件
  
  查看/修改 项目安装的依赖
  
  查看/修改 项目基础设置
  
• 真实的配置文件(webpack.config.js): 隐藏在项目根目录下的 /node_modules/@vue/cli-server
  
  如需修改, 可在项目文件根目录下创建自己的配置文件文件: webpack.config.js, 最终Vue Cli3会将自定义配置文件合并(merge)

  module.exports{
  	....
  }
  

终端进入项目文件目录执行, 访问终端上的地址

npm run server

Vue Cli3 与 Vue Cli2 区别

• Vue Cli3 基于 webpack4 打造, Vue Cli2 基于 webpack3
• Vue Cli3 的设计原则是 “0配置”, 移除的配置文件根目录下的 build 和 config等目录
• Vue Cli3 提供 vue ui 命令, 提供可视化配置, 更加人性化
• 移除static文件, 新增了public文件夹, 并且将index模板移入到public中

(五) runtime-compiler 与 runtime-only

这是一张Vue程序运行过程图:

runtime-compiler 和 runtime-only 的区别:

• runtime-compiler版本运行流程: template -> ast -> render函数 -> virtual Dom -> UI
• runtime-only版本运行流程: render函数 -> virtual Dom -> UI (此版本不存在template模板, 内部由vue-template-compiler 将template模板转换成render函数)
• runtime-only版本 比 runtime-compiler版本 运行效率更高, 打包后的文件也更小
  
  render渲染函数:
  DOM是文档对象模型(Document Object Model)的简写，在浏览器中通过js来操作DOM的操作性能很差，于是虚拟Dom应运而生。虚拟Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。React和Vue2都使用了虚拟DOM技术，虚拟DOM并不是真正意义上的DOM，它作为一个轻量级的JavaScript对象，在状态发生变化时，会进行Diff运算，来更新发生变化的DOM，对于未发生变化的DOM节点，不予操作，由于不是全部重绘，大大提高更新渲染性能。当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具

1. render函数基本使用: render: function(‘标签名’, {标签属性对象}, [内容数组]) {}

   修改main.js: 构建<h3>aaa <button >按钮<\button > <h3>

   new Vue({
     el: '#app',
     render: (createElement) => {
       // createElement('标签名', {标签属性对象}, [内容数组])
       return createElement(
         'h3', 
         {
           class: 'title'
         }, 
         [
           'aaaa ',
           createElement('button', {}, ['按钮'])
         ])
     }
   })
   

2. render函数传入自定义组件对象

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