主要记录自己的学习过程，记录笔记！ 侵权可删！！！

Vue-cli脚手架

一、什么是Vue CLI

只是写几个Vue的 Dem0 程序，就不需要Vue CLI.

开发大型项目，就必然需要使用Vue CLI.

• 使用 Vue.js 开发大型应用，需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
• 每个项目手动完成这些工作，效率比较低效，所以通常使用一些脚手架工具来帮助完成这些事情。

CLI 是什么意思？

• CLI 是 Command-Line Interface（命令行界面）,俗称脚手架.
• Vue CLI 是一个官方发布 vue.js 项目脚手架
• 使用 vue-cli 可以快速搭建Vue开发环境以及对应的 webpack 配置.

二、Vue CLI 使用前提 - Node

1.安装 NodeJS

• 直接去官方网站下载安装
• 网址：nodejs.cn/download/

2.检测安装的版本

• 默认情况下自动安装Node 和 NPM
• Node 环境要求8.9以上或者更高版本
• 检测版本(node-v) 和 (npm-v)

3.什么是 NPM？

• NPM 全称是 Node Package Manager
• 是一个 NodeJS包管理和分发工具，已经成为了非官方的发布 Node 模块（包）的标准。
• 经常使用 NPM 安装一些开发过程中依赖包。

cnpm安装

国内直接使用 npm 的官方镜像是非常慢，推荐使用淘宝 NPM 镜像。

可以使用淘宝定制的 cnpm（gzip 压缩支持）命令行工具代替默认的 npm:

npm install -g cnpm --registry=registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

cnpm install [name]

三、Vue CLI 使用前提 - Webpack

Vue.js 官方脚手架工具就是使用了 webpack 模块

• 对所有的资源会压缩等优化操作
• 它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效

Webpack 的全局安装

• npm install webpack -g

四、Vue CLI 的使用

安装 Vue 脚手架

• npm install -g @vue/cli

注意：上面安装的是 Vue CLI3的版本，如果需要想按照 Vue CLI2 的方式初始化项目时不可以的。

• 拉取 2.x 模板（旧版本）
• npm install -g @vue/cli-init

Vue CLI2 初始化项目

• vue init webpack my-project

Vue CLI3 初始化项目

• vue create my-project

五、runtime+compiler 和 runtime-only 的区别

runtime+compiler

步骤：template -> ast -> render -> vdom -> UI

runtime-only(1.性能更高 2.代码量更少)

步骤：render -> vdom -> UI

createElement相关知识

普通用法：createElement（ '标签', { 标签的属性 }, [' 标签的内容 '] ）

return creatElement('h2', { class:'box'},['Hello World'])

传入组件对象：

return creatElement(App)