一、组件拆分
在App.vue这个大组件中，添加小的组件，按页面模块划分，也就是头部header、导航nav、主体内容content，可以添加简单的样式，查看页面元素时会发现，有些样式根本没有添加的，这也就是vue-loader的帮我们搞定css兼容问题；
组件基本划分
二、vue-router路由
用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。
- 功能实现: 导航中有
商品、评论、商家在点击时，主体内容会发生改变，这就是可以通过vue-router来实现；
// HTML ==> App.vue组件
<!-- 导航-->
<div class="nav">
<div class="nav-item">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/goods">商品</router-link>
</div>
<div class="nav-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="nav-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<!-- 主体内容-->
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view> </router-view>
// 加载组件
Vue.use(VueRouter);
// javascript ==> main.js
// 1. 定义（路由）组件 (可以从其他文件 import 进来)
import Goods from './components/goods/Goods';
import Seller from './components/seller/Seller';
import Ratings from './components/ratings/Ratings';
// 2. 定义路由,每个路由应该映射一个组件
const routes = [
// 设置打开浏览器就默认调整到 "商品"，所以需要把根路由/重定向到/goods
{
path: '/',
redirect: '/goods'
},
{
path: '/goods',
component: Goods
},
{
path: '/ratings',
component: Seller
},
{
path: '/seller',
component: Ratings
}
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes, // （缩写）相当于 routes: routes
linkActiveClass: 'active' // 全局配置链接激活的类名
});
// 4. 创建和挂载根实例
// 要通过 router 配置参数注入路由，从而让整个应用都有路由功能
const app = new Vue({
// el: '#app',
template: '<App/>',
components: {
App
},
router // 添加路由
}).$mount('#app');
- 导入模块路径设置
【webpack配置】每次导入模块都是相对路径，在模块不同路径就会不一样；为了方便操作，每次模块通过components/xxx/xxx导入，即是在webpack.base.conf.js中添加components字段并设置组件目录位置:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// 路径的配置
'components': resolve('src/components')
}
},
- 打开页面默认显示页面内容
打开页面时即是根路由/, 改变默认显示即将根路由/重定向到/goods
// javascript ==> main.js
// 2. 定义路由,每个路由应该映射一个组件。
const routes = [
// 根路由，重定向到对应路由中
{
path: '/',
redirect: '/goods'
},
// 其他路由对应的组件
]
- 选中路由的样式调整
设置链接激活时使用的 CSS 类名， 默认值可以通过路由的构造选项 linkActiveClass 来全局配置(默认值:router-link-active)
// javascript ==> main.js
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
// ......
linkActiveClass: 'active' // 全局配置链接激活的类名，之后再添加上该类名的样式即可
});
// Nav.vue
<style>
.active{ // 链接激活的样式
color: rgb(240, 20, 20);
}
</style>
