構(gòu)建一個Vue項目
方法一：使用@Vue/cli
Vue CLI 是一個基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)访娶，
- 通過 @vue/cli 實現(xiàn)的交互式的項目腳手架秽五。
- 通過 @vue/cli + @vue/cli-service-global 實現(xiàn)的零配置原型開發(fā)里逆。
- 一個運行時依賴 (@vue/cli-service)系馆，該依賴：
- 可升級刑巧；
- 基于 webpack 構(gòu)建，并帶有合理的默認(rèn)配置俄烁；
- 可以通過項目內(nèi)的配置文件進(jìn)行配置绸栅；
- 可以通過插件進(jìn)行擴(kuò)展。
- 一個豐富的官方插件集合页屠，集成了前端生態(tài)中最好的工具。
- 一套完全圖形化的創(chuàng)建和管理 Vue.js 項目的用戶界面蓖柔。
安裝
npm install -g @vue/cli
# OR
yarn global add @vue/cli
創(chuàng)建
vue create hello-world
選默認(rèn)的包含了基本的 Babel + ESLint 設(shè)置的 preset辰企，也可以選“手動選擇特性”來選取需要的特性。進(jìn)入目錄后運行yarn serve 可以打開webpack-dev-server
使用圖形化界面
通過 vue ui 命令以圖形化界面創(chuàng)建和管理項目
方法二：從零搭建一個Vue項目
使用webpack或者rollup况鸣，適合有經(jīng)驗者
方法三：使用codesandbox.io
點擊create sandbox
截屏2022-08-19 09.43.06.png
選擇Vue3
截屏2022-08-19 09.45.27.png
即可快速得到一個配置好的vue項目牢贸，如果想轉(zhuǎn)到本地編輯，選擇導(dǎo)出源碼壓縮包镐捧，解壓后即可在本地編輯潜索。在package.json里可以看到如何運行
截屏2022-08-19 09.47.02.png
Vue的兩個版本
vue.js和vue.runtime.js
方法一：從HTML里直接得到視圖
（完整版）
從CDN引用vue.js或者vue.min.js可以做到
也可以通過import引用vue.js或者vue.min.js，MVC的視圖沒有寫在js里面懂酱，直接寫在頁面里
方法二：使用JS構(gòu)造視圖（非完整版）
引入vue.runtime.js
二者的區(qū)別
截屏2022-08-19 11.53.37.png
// 需要編譯器 完整版
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要編譯器 非完整版
new Vue({
render (h) {
return h('div', this.hi)
}
})
tips：最佳實踐:總是使用非完整版竹习，然后配合vue-loader和vue文件。
1.保證用戶體驗列牺，用戶下載的JS文件體積更小整陌，但只支持h函數(shù)。
2.保證開發(fā)體驗，開發(fā)者可直接在vue文件里寫HTML標(biāo)簽泌辫，而不寫h函數(shù)随夸。
3.臟活讓loader做，vue-loader把vue文件里的HTML轉(zhuǎn)為h函數(shù)震放。 這樣你就可以不寫h函數(shù)也能得到h函數(shù)宾毒。
