Vue.js 2.x 高仿网易云APP《二》

上一篇 文章，手把手的把项目骨架和用到的基础东西配置完毕，接下来就是分模块开发了。

一、配置路由

1. 在compontents 下新建几个文件夹/文件
2. 在router 下 index.js 下 添加路由，并配置路径

import Header from '@/components/header/header'
import Footer from '@/components/footer/footer'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'Header',
            component: Header
        },
        {
            path: '/footer',
            name: 'Footer',
            component: Footer
        }
    ]
})

3. 在app.vue 文件中添加

<router-link to = "/">header</router-link>

切记 不要遗漏 <router-view/>

二、父子组件

页面中有的模块结构是相似的，我们就把相同的给抽出来，以便组件复用。
1.新建一个文件，里边存放子组件的内容
2.在页面中 引用该组件
3.如果其他页面也有类似的结构，可以直接拿过来用。

<template>
  <div>
    <p>我是头部</p>
    <Vsection></Vsection>
    <router-view></router-view>
  </div>
</template>
<script>
import Vsection from '../section'
export default {
    components: {
      Vsection
    }
}
</script>

三、使用Element UI 组件库

1. 安装element

npm i element-ui -S

2 .引入Element
2.1 完整引入
在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

2.2 按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

引入完成之后，你就可以自由自在的使用强大的element ui 了！