視頻資源來(lái)自：b站coderwhy王紅元老師——最全最新Vue虾宇、Vuejs教程，從入門到精通
文章僅為個(gè)人觀看視頻后的學(xué)習(xí)心得筆記传蹈，用于個(gè)人查看和記錄保存谈跛。文中定有疏漏錯(cuò)誤之處，懇請(qǐng)指正寂曹。
Vue CLI詳解
Vue CLI
<font color=#909534>Command-Line Interface</font>
Vue CLI使用前提 ：Node、webpack回右、npm
安裝：npm install -g @vue/cli
安裝CLI2：npm install @vue/cli-init -g
Vue CLI2初始化項(xiàng)目：vue init webpack my-project
Vue CLI3初始化項(xiàng)目：vue create my-project
Vue CLI2
VueCore+vue-router+vuex
ES(js)-Lint<font color=#909534>——對(duì)js代碼進(jìn)行限制隆圆，之后都必須寫規(guī)范。</font>不能有任何錯(cuò)誤（多個(gè)逗號(hào)翔烁、分號(hào)渺氧、函數(shù)和括號(hào)少空格了、定義了函數(shù)沒(méi)有用）蹬屹，否則會(huì)報(bào)錯(cuò)侣背。
可以在config文件夾里的修改useEslint為false
<font color=#909534>ctrl + S保存程序</font>
e2e<font color=#909534>——end to end端到端測(cè)試</font>->selenium
js ->字節(jié)碼 ->瀏覽器
V8引擎：js ->二進(jìn)制代碼
static靜態(tài)資源文件夾，編譯后會(huì)原封不動(dòng)地放到dist文件夾
CLI2生成的目錄結(jié)構(gòu)解析
Runtime-Compiler和Runtime-only的區(qū)別
箭頭函數(shù)：
render: h => h(App)
等價(jià)于
render: function (h) {
return h(App)
}
Vue程序運(yùn)行過(guò)程：
template - >ast ->render ->virtual dom ->真實(shí)dom
==runtime-complier：==
template - >ast ->render ->virtual dom ->UI
==runtime-only：==
render ->virtual dom ->UI
流程少慨默，性能更高贩耐，代碼量更少（輕6kB）
1.createElement('標(biāo)簽',{標(biāo)簽的屬性},['標(biāo)簽里的內(nèi)容'])
new Vue({
el: '#app',
render: function (createElement) {
return createElement('h2',
{class:'box'},
['Hello World',createElement('button',['按鈕'])])
}
})
2.傳入組件對(duì)象：<font color=#909534>這樣就不用寫template了</font>
new Vue({
el: '#app',
render: function (createElement) {
return createElement(cpn)
},
components: {
cpn
}
})
相似于runtime-only
那么，.vue文件中的template是由誰(shuí)處理的呢厦取？
loader-template-complier
App對(duì)象：沒(méi)有template憔杨，只有render
Vue CLI3
vue2.5.21 ->vue2.x ->flow-type(facebook)
Vue3.x ->TypeScript(microsoft)
設(shè)計(jì)原則：“0”配置
vue ui 可視化
<font color=#909534>preset：配置</font>
<font color=#909534>manually：手動(dòng)的</font>
按空格是選擇/取消
配置：
<font color=#909534 size=2>Users/YY/</font>全局配置文件.vuerc保存了個(gè)人配置
vcs -> version control system 版本控制錯(cuò)誤
之前的dev變成serve了。"serve": "vue-cli-service serve",
<img src="https://xiao910888.oss-cn-hangzhou.aliyuncs.com/img/image-20210709175444224.png" alt="image-20210709175444224" style="zoom:50%;" />
el也不用寫
配置：
1.在終端/cmd：vue ui
導(dǎo)入文件夾后蒜胖，可以顯示項(xiàng)目?jī)x表盤
2.項(xiàng)目中創(chuàng)建文件：vue.config.js <font color=#909534>必須這個(gè)名</font>
使用git添加進(jìn)去：git add .，git commit -m '修改配置文件'
總目錄：
總目錄：
邂逅Vuejs
Vue基礎(chǔ)語(yǔ)法
組件化開(kāi)發(fā)
前端模塊化
webpack詳解
Vue CLI詳解
vue-router
Promise的使用
Vuex詳解
網(wǎng)絡(luò)模塊封裝
項(xiàng)目實(shí)戰(zhàn)
