Vue CLI
1. 什么是 Vue CLI
- 網(wǎng)址：cli.vuejs.org
- 腳手架是什么東西
- CLI 依賴(lài) webpack ==> node 中的 npm
- 安裝 CLI3->拉去 CLI2 模塊
npm install -g @vue/cli
2. CLI2 初始化項(xiàng)目的過(guò)程
配置相關(guān)文件
vue init webpack 項(xiàng)目名稱(chēng)
3. CLI2 生產(chǎn)的目錄結(jié)構(gòu)的解析
CLI2-test.jpg
4. runtime-complier 和 runtime-only 的區(qū)別
vue程序運(yùn)行過(guò)程.jpg
- runtime-complier
- 執(zhí)行過(guò)程(4 步)
template(組件) -> ast(抽象語(yǔ)法樹(shù)) -> render(functions) -> virtual dom(虛擬 dom) -> ui(網(wǎng)頁(yè))
- 執(zhí)行過(guò)程(4 步)
// main.js
new Vue({
el: '#app',
components: { App },
template: '<App/>',
})
- runtime-only
- 執(zhí)行過(guò)程(2 步)
render(functions) -> virtual dom(虛擬 dom) -> ui(網(wǎng)頁(yè))
- 執(zhí)行過(guò)程(2 步)
// main.js
new Vue({
el: '#app',
render: (h) => h(App),
})
兩者比較：
- runtime-only 比 runtime-complier 性能更高
- runtime-only 比 runtime-complier 代碼更少
- npm run build 示例圖
npm run build.png
-
npm run dev 示例圖
npm run dev.png
5. Vue CLI3/4 初始化
創(chuàng)建項(xiàng)目
vue create 項(xiàng)目名稱(chēng)
main.js 代碼
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Vue 項(xiàng)目管理器(查看其他的配置文件)
// 1. 終端操作
vue ui
// 2.node_module/@vue 中查看
