在上一篇文章中，主要嘗試了vue的小demo，應(yīng)用了一些vue的指令、屬性等，且是在瀏覽器端直接開(kāi)發(fā)的，但是在開(kāi)發(fā)大程序中這些是遠(yuǎn)遠(yuǎn)不夠的。那么開(kāi)發(fā)大型項(xiàng)目時(shí)，如何使用vue呢？
這就用到了單頁(yè)面組件，如何搭建？即：通過(guò)npm安裝vue-cli，這點(diǎn)官網(wǎng)上介紹的很明白了：
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴(lài)，走你
$ cd my-project
$ npm install
$ npm run dev
瀏覽器中即出現(xiàn)：
看一下項(xiàng)目的組織結(jié)構(gòu)：
具體可以看官方文檔，這里簡(jiǎn)要分析一下：
build:構(gòu)建配置文件，config:node的配置文件，src：網(wǎng)站的源碼所在，static：可以放置一些靜態(tài)文件資源，test：?jiǎn)卧獪y(cè)試用的文件。
也即我們所寫(xiě)的主要代碼都放在src下。
因此我們?cè)俜治?strong>src下的文件目錄：
assets:可用于存放一些共用的靜態(tài)資源
components:存放單頁(yè)面組件
router:路由配置
App.vue:首頁(yè)，也即根目錄（可能這么說(shuō)不恰當(dāng)，因?yàn)槿绻怯胷outer的話，整個(gè)網(wǎng)站是一個(gè)單頁(yè)面應(yīng)用）
main.js:整個(gè)項(xiàng)目的打包入口。
具體進(jìn)入App.vue，
其代碼是：
<div id="app">
<router-view></router-view>
</div>
而在router里配置的
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
因此，在第一張圖片的主要展示內(nèi)容來(lái)自此。
我們先不動(dòng)這個(gè)router，已經(jīng)迫不及待要添加組件試試了。
在components下添加little.vue，如下：
碼上：
<template>
<div class="little">
<span>這里是來(lái)自little的問(wèn)候！</span>
</div>
</template>
<style>
.little {
color: #f00;
font-weight: 700;
}
</style>
然后再app.vue中引入組件：
<template>
<div id="app">
<router-view></router-view>
<little></little>
</div>
</template>
<script>
import little from './components/little/little.vue'
export default {
name: 'app',
components: {
little
}
}
</script>
就可得到：
下一步，我們嘗試寫(xiě)一個(gè)簡(jiǎn)單的導(dǎo)航欄，通過(guò)路由實(shí)現(xiàn)單頁(yè)面變化導(dǎo)航。
首先創(chuàng)建mi.vue、dong.vue、ye.vue作為導(dǎo)航去處，
然后在App.vue中
<template>
<div id="app">
<nav>
<ul>
<li>
<router-link :to="{name: 'mi'}">MIMIMIMI</router-link>
</li>
<li>
<router-link :to="{name: 'dong'}">DongDongDongDong</router-link>
</li>
<li>
<router-link :to="{name: 'ye'}">YeahYeahYeahYeah</router-link>
</li>
</ul>
</nav>
<router-view></router-view>
<little></little>
</div>
</template>
在router里配置：
import mi from '@/components/mi/mi'
import ye from '@/components/ye/ye'
import dong from '@/components/dong/dong'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}, {
path: '/mi',
name: 'mi',
component: mi
}, {
path: '/dong',
name: 'dong',
component: dong
}, {
path: '/ye',
name: 'ye',
component: ye
}
]
})
這樣就得到了：
點(diǎn)擊導(dǎo)航欄可以分別進(jìn)入對(duì)應(yīng)分頁(yè)。
