Vue.js---vue專案有哪些神神鬼鬼
1. vue create vue04創建一個vue04；如果沒有網路怎么辦？在有網路的情況下，先打包vue04，如果沒有網路又想創建新的專案，就解壓縮，就可以運行了
2. vue04
3. 創建后，進入vue04，再運行npm run serve
4. 了解npm run serve的執行順序
--> 1. 讀取package.json 【script】
--> 2. 讀取serve, 通過腳手架啟動專案"vue-cli-service serve"
--> 3. 訪問路徑：
--> 4. 運行入口程式 （src-->main.js）
--> 看main.js
4.1. 讀取的是node_modules下面的vue, 里面有原始碼
4.2. 后綴名是vue的模板，App.vue模板（有：界面template, 腳本script， style樣式）
4.3. 產品提示是否關閉 （阻止生產訊息）
4.4. 開啟產品提示來觀察下
4.5. webpack: 2種模式
development mdoe 開發模式（更多的除錯性）
production mode 產品模式（更好的性能）
提醒你發布的時候，要改為產品模式，即改為false
5. 代碼: 創建vue物件（ViewModel），掛載到index.html中的app div (如果把public里面的index.html中div的id修改了，頁面就報錯了，說明是掛載到這里)
界面---資料模型---橋梁搭建起來 new Vue
來認識下這段代碼
const app = new Vue({ router, data: { name: '小明' }, render: h => h(App) }); app.$mount('#app'); console.log(app);
console:
同：
const app = new Vue({ router, el: '#app', data: { name: '小明' }, render: h => h(App) }); app.$mount('#app');//$mount掛載，注銷掉一樣 console.log(app);
如果注釋掉render函式，會報錯
（要么一個預編譯的模板中在render函式中，要么編譯包含在里面，否則模板編譯器不能用）
理解：render: h => h(App) （就是包含了一個預編譯模板）
6. 加載預編譯模板App.vue檔案 （包含界面template, 腳本script， style樣式，看4.2正好引入了，后面就是加載了這個預編譯檔案）, 并且傳入render函式，進行渲染
7. 看起來的效果，就像是App.vue就是根層入口
8.
9. 創建vue05, 安裝router和vuex
src-->main.js-->多了router和store（store勾選vuex后產生的）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106503.html
標籤：JavaScript
上一篇：JS中常用的輸出方式(五種)