作者

QQ群：852283276
微信：arm80x86
微信公众号：青儿创客基地
B站：主页 https://space.bilibili.com/208826118

参考

Element中文官网
Element官网例子
Element-UI使用基本介绍
vuejs 和 element 搭建的一个后台管理界面
vue.js+element-ui+vuex环境搭建
Vue.js-Element-UI安装与使用（网站快速成型工具）实现登陆界面
使用vuejs2.0和element-ui 搭建的一个后台管理界面

安装

进入工程目录，使用npm install -S安装element-ui，

PS C:\dog\program\vue.js\helloworld> npm install element-ui -S
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ element-ui@2.6.1
added 6 packages from 6 contributors and audited 30857 packages in 31.969s
found 73 vulnerabilities (66 low, 1 moderate, 5 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

查看package.json，element-ui的版本为2.6.1，

  "dependencies": {
    "element-ui": "^2.6.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

引入Element

完整引入

编辑main.js，

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

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

按需引入

参考官网

设计

将之前生成的helloworld工程的HelloWorld.vue改掉，

<template>
  <div class="hello">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="10000">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

效果