一逆巍、組件拆分
在App.vue這個(gè)大組件中，添加小的組件，按頁(yè)面模塊劃分，也就是頭部header、導(dǎo)航nav房待、主體內(nèi)容content，可以添加簡(jiǎn)單的樣式捌朴，查看頁(yè)面元素時(shí)會(huì)發(fā)現(xiàn)吴攒，有些樣式根本沒(méi)有添加的，這也就是vue-loader的幫我們搞定css兼容問(wèn)題砂蔽；
組件基本劃分
二洼怔、vue-router路由
用 Vue.js + vue-router 創(chuàng)建單頁(yè)應(yīng)用，是非常簡(jiǎn)單的左驾。使用 Vue.js 镣隶，我們已經(jīng)可以通過(guò)組合組件來(lái)組成應(yīng)用程序，當(dāng)你要把 vue-router 添加進(jìn)來(lái)诡右，我們需要做的是安岂，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們帆吻。
- 功能實(shí)現(xiàn): 導(dǎo)航中有
商品域那、評(píng)論、商家在點(diǎn)擊時(shí)猜煮，主體內(nèi)容會(huì)發(fā)生改變次员，這就是可以通過(guò)vue-router來(lái)實(shí)現(xiàn)；
// HTML ==> App.vue組件
<!-- 導(dǎo)航-->
<div class="nav">
<div class="nav-item">
<!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
<!-- 通過(guò)傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
<router-link to="/goods">商品</router-link>
</div>
<div class="nav-item">
<router-link to="/ratings">評(píng)論</router-link>
</div>
<div class="nav-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<!-- 主體內(nèi)容-->
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view> </router-view>
// 加載組件
Vue.use(VueRouter);
// javascript ==> main.js
// 1. 定義（路由）組件 (可以從其他文件 import 進(jìn)來(lái))
import Goods from './components/goods/Goods';
import Seller from './components/seller/Seller';
import Ratings from './components/ratings/Ratings';
// 2. 定義路由,每個(gè)路由應(yīng)該映射一個(gè)組件
const routes = [
// 設(shè)置打開(kāi)瀏覽器就默認(rèn)調(diào)整到 "商品"王带，所以需要把根路由/重定向到/goods
{
path: '/',
redirect: '/goods'
},
{
path: '/goods',
component: Goods
},
{
path: '/ratings',
component: Seller
},
{
path: '/seller',
component: Ratings
}
]
// 3. 創(chuàng)建 router 實(shí)例淑蔚，然后傳 `routes` 配置
const router = new VueRouter({
routes, // （縮寫(xiě)）相當(dāng)于 routes: routes
linkActiveClass: 'active' // 全局配置鏈接激活的類(lèi)名
});
// 4. 創(chuàng)建和掛載根實(shí)例
// 要通過(guò) router 配置參數(shù)注入路由愕撰，從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
// el: '#app',
template: '<App/>',
components: {
App
},
router // 添加路由
}).$mount('#app');
- 導(dǎo)入模塊路徑設(shè)置
【webpack配置】每次導(dǎo)入模塊都是相對(duì)路徑，在模塊不同路徑就會(huì)不一樣搞挣；為了方便操作，每次模塊通過(guò)components/xxx/xxx導(dǎo)入囱桨，即是在webpack.base.conf.js中添加components字段并設(shè)置組件目錄位置:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// 路徑的配置
'components': resolve('src/components')
}
},
- 打開(kāi)頁(yè)面默認(rèn)顯示頁(yè)面內(nèi)容
打開(kāi)頁(yè)面時(shí)即是根路由/, 改變默認(rèn)顯示即將根路由/重定向到/goods
// javascript ==> main.js
// 2. 定義路由,每個(gè)路由應(yīng)該映射一個(gè)組件邮旷。
const routes = [
// 根路由，重定向到對(duì)應(yīng)路由中
{
path: '/',
redirect: '/goods'
},
// 其他路由對(duì)應(yīng)的組件
]
- 選中路由的樣式調(diào)整
設(shè)置鏈接激活時(shí)使用的 CSS 類(lèi)名婶肩， 默認(rèn)值可以通過(guò)路由的構(gòu)造選項(xiàng) linkActiveClass 來(lái)全局配置(默認(rèn)值:router-link-active)
// javascript ==> main.js
// 3. 創(chuàng)建 router 實(shí)例貌夕，然后傳 `routes` 配置
const router = new VueRouter({
// ......
linkActiveClass: 'active' // 全局配置鏈接激活的類(lèi)名律歼，之后再添加上該類(lèi)名的樣式即可
});
// Nav.vue
<style>
.active{ // 鏈接激活的樣式
color: rgb(240, 20, 20);
}
</style>
