vue vue最終的的使用方案

接下來要講的是從js檔案寫vue的** 到 vue檔案寫vue**整個推進過程，來體驗下真正的開發方式，開始吧

一般vue專案在根目錄下有乙個index.html，他是作為我們專案的乙個首頁或者入口的頁面，但這個頁面我們基本不會從碰它，頁面大概如下：

})上面**最主要的部分就是template中的**把el所管理的標籤給替換調了，如此一來，頁面上就有東西進行展示了。但問題也來了，template的**太多了吧？是不是該來個抽取呢？然後**變成了下面：

import vue from 'vue'
template: `
<
div>
<
h1>}
h1>
<
h1>}
h1>
div>
`,  data()
},methods: {}
}new vue(
})

這個**變化可能會有點大，我統一來解釋下：

本來想template,data,methods中這些**是寫在vue例項中的，但在實際開發中，vue例項他不需要承擔這麼多東西，他應該是簡潔的，而template,data,methods由他的子元件來負責，於是我們建立乙個子元件，把上述的**抽取到了子元件中，vue例項只要去註冊這個子元件，並使用他的template，如此一來vue例項不需要寫任何的template，只要使用子元件的template即可；

上述的過程和我們之前接觸的是有一些不一樣的，以前是父元件有屬於他自己的template模板，然後註冊了子元件後，把子元件用在父元件模板的內部，屬於巢狀關係。現在不一樣了，現在父元件的模板完全由子元件來代替，是替換關係。

上面的**還存在乙個問題，父元件vue例項和子元件在同乙個js頁面，存在一定的耦合度，因此我們希望把子元件給抽取出來放在乙個cpn.js，然後就變成了如下**：

cpn.js:

export default }
h1>
<
h1>}
h1>
div>
`,  data()
},methods: {}
}

main.js：

import vue from 'vue'
new vue(
})

<
template
>
<
div>
<
h1>}
h1>
<
h1>}
h1>
div>
template
>
<
script
>
export 
default
data() ;
},methods: {},
};script
>
<
style 
scoped
>
style
>

該vue檔案相當乙個元件，並且使用了export default，是可以被其他元件來使用的，如此一來，我們的main.js就不再用之前的cpn.js，得引入該檔案了，如下：

接著需在webpack.config.js進行配置，如下：

如果在打包的時候還出錯了，有可能是因為vue-loader的版本有點高，需要額外配置乙個東西；但是我們圖省事點，在package.json中把版本調掉13及以下即可，如下：

還有如果希望匯入元件的時候不要字尾名，可在webpack.config.js配置下：

vue vue最終的的使用方案

入門vue （vue的安裝）

Vue vue中setInterval的問題

Vue vue中常用的ECMAScript6語法

vue vue最終的的使用方案

入門vue （vue的安裝）

Vue vue中setInterval的問題

Vue vue中常用的ECMAScript6語法

相關推薦