Vue CLI部分（4）

Vue CLI

1. 什么是 Vue CLI

• 网址：cli.vuejs.org
• 脚手架是什么东西
• CLI 依赖 webpack ==> node 中的 npm
• 安装 CLI3->拉去 CLI2 模块

npm install -g @vue/cli

2. CLI2 初始化项目的过程

配置相关文件

vue init webpack 项目名称

3. CLI2 生产的目录结构的解析

CLI2-test.jpg

4. runtime-complier 和 runtime-only 的区别

vue程序运行过程.jpg

1. runtime-complier
   • 执行过程(4 步)

     template(组件) -> ast(抽象语法树) -> render(functions) -> virtual dom(虚拟 dom) -> ui(网页)

// main.js
new Vue({
    el: '#app',
    components: { App },
    template: '',
})

2. runtime-only
   • 执行过程(2 步)

     render(functions) -> virtual dom(虚拟 dom) -> ui(网页)

// main.js
new Vue({
    el: '#app',
    render: (h) => h(App),
})

两者比较：

1. runtime-only 比 runtime-complier 性能更高
2. runtime-only 比 runtime-complier 代码更少

• npm run build 示例图

npm run build.png

• npm run dev 示例图

  
  
  npm run dev.png

5. Vue CLI3/4 初始化

创建项目

vue create 项目名称

main.js 代码

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Vue 项目管理器(查看其他的配置文件)

// 1. 终端操作
vue ui

// 2.node_module/@vue 中查看