先來個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節點。詳細部分喜歡的可以再百度一下具體實現的原理。