vuerouter-9_ElementUI

 npm install element-ui -S

完整应用：

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) });

按需引入：

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

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D
 .babelrc 修改为：

{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime",[
"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)
});
实例：

<template>
<div class="home">
<ul class="ul-list">
<router-link tag="li" to='/Home/Hot' >热门</router-link>
<router-link tag="li" to='/Home/Recommend' >推荐</router-link>
</ul>
<router-view />
home
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<Nav />
</div>
</template>

<script>
import Nav from '../Nav'
export default{
name:"Home",
components:{Nav},
data(){
return{

}
}
}
</script>

<style scoped>
.ul-list{list-style:none;font-size:0;text-align:center;}
.ul-list li{display:inline-block;font-size:14px;padding:5px;font-weight:bold;}
.active{color:#42B983}
</style>