（四）初学Vue之第三方组件Element-ui组件的使用。

一.简介

在我们的工程项目中，使用一些第三方组件如Element-ui，Bootstrap等，可以让我们更快更好地完善美化设计我们的项目。可以省去很多时间，重要的是这些组件有时候比我们自己做的的效果要更好。

二.具体做法。

1.新建Vue项目

1. vue init webpack vue-study7.21 // 生成项目
2. cd vue-study7.21 // 进入项目目录
3. npm install // 安装依赖
4. npm run dev // 运行项目

2.添加Element-ui组件

// 这里用cnpm代替npm 使用淘宝镜像代理
1.cnpm install element-ui -S 

3.main.js引入element-ui组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store.js'

Vue.use(ElementUI)
Vue.config.productionTip = false

// 路由跳转
Vue.prototype.$goRoute = function (index) {
  this.$router.push(index)
}
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

4.在需要用的组件中使用element-ui组件

如src/page/index.js

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-button>element-ui组件</el-button>
        <el-button type="primary" @click="hanshu2">路由跳转</el-button><br>
        <el-button type="info" @click="hanshu0">vuex组件</el-button>
        <el-button type="warning" @click="hanshu1">api请求</el-button>
      </el-aside>
      <el-container>
        <el-header><myHeader></myHeader></el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer><myFooter></myFooter></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

element-ui官方文档供参考：http://element-cn.eleme.io/#/zh-CN/component/installation