VueJS 基础部分-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 生产的目录结构的解析

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

1. runtime-complier
   • 执行过程 ==> 4 步

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

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

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 dev 示例图
  

5. Vue CLI3/4 初始化

1. 创建项目

vue create `项目名称`

2. main.js 代码示例

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

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

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

// 1. 终端操作
vue ui

// 2.node_module/@vue 中查看 ⇒ vue.config.js