[前端] VUE基础 (9) (element-ui)

一、element-ui的使用

官方网页：https://element.eleme.cn/#/zh-CN

1.安装element-ui

(venv) D:\pycharm_workspace\vue_learn\leeoo>cnpm i element-ui -S
√ Installed 1 packages
√ Linked 8 latest versions
√ Run 0 scripts
√ All packages installed (6 packages installed from npm registry, used 3s(network 3s), speed 26.46kB/s, json 9(70.15kB), tarball 0B)

2.导入element-ui

在main.js中导入element-ui的js和css：

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入element-ui的js
import ElementUI from 'element-ui'
// 引入element-ui的全局css
import 'element-ui/lib/theme-chalk/index.css'

// 使用ElementUI插件（很重要）
Vue.use(ElementUI)

Vue.config.productionTip = false

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

3.调整全局样式（习惯）

习惯用法：这是一个习惯用法，去除body的8px的margin，修改a标签和ul的样式。

在static目录下创建global目录，然后在其中创建index.css作为全局样式：

/* /static/global/index.css */
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

然后在main.js全局导入：

import '../static/global/index.css'

4.使用element-ui的组件

element-ui的组件使用很简单，找到一个我们想要使用的组件，例如环形进度条：

 我们将代码直接拷贝到我们自己的组件中，例如Home组件：

<template>
  <div class="home">
    <el-progress type="circle" :percentage="0"></el-progress>
    <el-progress type="circle" :percentage="25"></el-progress>
    <el-progress type="circle" :percentage="100" status="success"></el-progress>
    <el-progress type="circle" :percentage="70" status="warning"></el-progress>
    <el-progress type="circle" :percentage="50" status="exception"></el-progress>
  </div>
</template>

<script>
  export default {
    name: "Home"
  }
</script>

<style scoped>
  .home {
    width: 1000px;
    height: 400px;
    margin: 0 auto;
    text-align: center;
  }
</style>

页面效果：

其他组件的使用方法也是一样的。使用组件时一定要注意看组件的属性和方法，对数据的操作等。

≧◔◡◔≦