本內(nèi)容為系列內(nèi)容，全部?jī)?nèi)容請(qǐng)看我的vue教程分類(lèi)
那么前面我們都是直接引入vuejs文件的方式進(jìn)行開(kāi)發(fā)，然后在同一個(gè)html文件中進(jìn)行開(kāi)發(fā)
這顯然是不符合組件化開(kāi)發(fā)的思路的，前面我們說(shuō)過(guò)實(shí)際當(dāng)中的開(kāi)發(fā)都是編寫(xiě)以.vue結(jié)尾的頁(yè)面文件，然后用webpack進(jìn)行打包
這一節(jié)我們將到vue的單文件組件開(kāi)發(fā)，使用的是webpack提供的簡(jiǎn)易模板，沒(méi)有webpack基礎(chǔ)的朋友不要怕，下一節(jié)會(huì)簡(jiǎn)答講一講webpack的基礎(chǔ)
安裝
首先依次安裝這些包，前提是你的電腦已經(jīng)安裝了node
npm install webpack -g
npm install @vue/cli -g
npm install @vue/cli-init -g
vue init webpack-simple
開(kāi)始安裝后會(huì)有一系列的提示，都按enter下一步就行
配置文件講解
簡(jiǎn)單的看一下配置文件，看不懂的沒(méi)有關(guān)系后面會(huì)講到
打開(kāi) src/main.js，簡(jiǎn)單講解一下，這里它導(dǎo)入了vue的文件，然后實(shí)例化了一個(gè)vue，然后還導(dǎo)入了一個(gè) App.vue文件，并且把這個(gè)文件渲染給頁(yè)面，所以項(xiàng)目運(yùn)行起來(lái)默認(rèn)頁(yè)面就是 App.vue
// 導(dǎo)入vue文件
import Vue from 'vue'
// 導(dǎo)入 App.vue
import App from './App.vue'
// 實(shí)例化vue
new Vue({
el: '#app',
// 使用render函數(shù)將 App.vue 渲染給頁(yè)面
render: h => h(App)
})
然后打開(kāi) App.vue 查看一下，刪掉不用的東西，然后仔細(xì)看下頁(yè)面結(jié)構(gòu)，一個(gè)template，一個(gè)script，一個(gè)style；這個(gè)結(jié)構(gòu)和我們前面定義組件的方式是不是差不多的呢？這就是vue的單文件組件開(kāi)發(fā)，只不過(guò)他這個(gè)寫(xiě)法會(huì)被webpack打包處理，所以可以這樣寫(xiě)
運(yùn)行
我們?cè)诿钚兄休斎?然后打開(kāi)瀏覽器查看效果
npm install
npm run dev
創(chuàng)建一個(gè)組件
我們?cè)?strong>src目錄下面創(chuàng)建一個(gè)views目錄，專(zhuān)門(mén)用來(lái)存放vue頁(yè)面文件，并創(chuàng)建一個(gè)Index.vue文件
文件內(nèi)容
<template>
<h1>
this is index
</h1>
</template>
然后我們來(lái)到App.vue，我們?cè)?strong>script標(biāo)簽中導(dǎo)入剛剛創(chuàng)建的組件，并且注冊(cè)組件,這一切和我們上面講的都是一樣的
<script>
import Index from './views/Index'
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components:{
Index,
}
}
</script>
然后在頁(yè)面中引用
<template>
<div >
<Index></Index>
{{msg}}
</div>
</template>
查看結(jié)果
這一切是不是就方便清晰起來(lái)了呢？
這一節(jié)就到這里了，重點(diǎn)是如何實(shí)現(xiàn)的這個(gè)打包，將會(huì)在下一節(jié)講到
