先來個demo
說起來vue的專案，我們所需要用到的并不是太多，當然，這里面也有許多非常重要的東西，講正題之前，我們看個DEMO（新建個html，直接引入vue），
let contnet = Vue.extend({
template: `<p>我就是{{name}}，如何？</p>`,
data: function () {
return {
name: '秦始皇'
}
}
})
let vm = new contnet()
vm.$mount('#box')
<div id="box">
{{name}}
</div>
上述代碼是否看著非常眼熟？沒錯！這就是你在腳手架中的index.html和main.js中所用到的，運行上述代碼后，你會發現你的瀏覽器中已經渲染出"
我就是請始皇，如何？"，我們可以把“id=box”這個標簽理解為根，我們只是將我們創建的實體物件掛載進我們的box中，然后通過 m o u n t 方 法 進 行 解 析 ， 從 而 渲 染 出 來 ， （ 如 果 是 糾 結 mount方法進行決議，從而渲染出來，（如果是糾結 mount方法進行解析，從而渲染出來，（如果是糾結mount實作原理的同學可以自行百度，VUE中說到渲染，歸根結底離不開template，render，creatElement，就這樣，只不過中間許多東西需要考慮處理，難點也就是這些需要處理的東西，建議看的時候，先看整體部分，再拆開看，不懂的再百度，百度不出來就自己寫個demo實驗，個人學習方式是這樣）
所有代碼如下圖：
index.html和src檔案中的main.js,app.vue
如果上述的DEMO看懂了的話，我想對腳手架新建出來的index.html和main.js應該也就不算陌生了吧？話不多說上圖！
-
我們先看看index.html，里面并沒有太多的東西，也是我們所熟悉的html，里面只有一個ID為app的div標簽，如果做回應式或者移動端的同學們，你們的meta還是加進這里面哦，如果你問這是單頁面的專案，如果你有多個title應該怎么辦？？那么，你猜（先不提這個，凌晨12點了，，趕著正題先說，后續路由部分幾乎可以滿足你的所有需求，）？
-
我們再看一下main.js檔案，這個文件就是vue-cli中js的主入口檔案，你的所有JS幾乎都會通過它來引入，除了上面的一堆import引入的東西之外，還有一個Vue.config.productionTip = false這個彈訊息的東西，重點就是下面的new Vue了，我們可以看到：
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
我們的vue的實體直接掛在了 #app 上面，router是路由部分，路由控制著每個頁面組件，store暫且不提，render函式入參為組件App，再來看下上面有個import如下：
import App from './App.vue'
render函式接收三個引數，回傳一個虛擬節點，這個節點就是我們需要渲染的，（詳細原理可查閱相關資料，東西比較多，就不說了，）
我們的new vue實體中已經有APP組件作為入參通過render函式的處理之后再回傳的節點，再通過$mount渲染進我們的index.html中的“id=box”的div中，
再看看APP.vue，我們通常理解為根組件，所有的組件都是它的子組件，在根組件中再使用router-view組件，路由中匹配到的所有的組件都會通過它進行渲染，
好了，這三個檔案作用基本上都說完了，如何聯系的，大致也就如上所述，（如果有不對的，可以提出來哦，我會認真改正的，謝謝咯，本來打算今天將目錄架構搭以及路由部分解決的，想想這基礎的東西總得知道一下吧，還是先說這個吧，下節再說專案正式創建的部分，）
題外話： template和render函式
這兩個都是用于渲染dom節點的，只不過其中template是先轉為ast語法樹，ast語法樹又轉化為render函式，因為render函式回傳的是虛擬節點，它又通過path和dom diff的演算法來生成真實的dom節點，詳細部分喜歡的可以再百度一下具體實作的原理，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/257436.html
標籤：其他