1 前言

ElementUI���一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

ElementUI官网 https://element.eleme.io

2 安装

运行命令

cnpm i element-ui -S

-S表示只在该项目下安装，不是全局安装

注意：要跳到项目所在目录运行

会在node_modules文件夹下生成element-ui子目录

3 应用

接1.1 创建第一个vue项目-CSDN博客生成的项目。

3.1 在src/main.js中引入element组件，修改后代码如下：

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'/*引入element组件*/import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI); Vue.config.productionTip = false /* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: ''})

3.2 修改src/components/HelloWorld.vue代码如下

      
{{ msg }}
          默认按钮      主要按钮      成功按钮      信息按钮      警告按钮      危险按钮       export default {  name: "HelloWorld",  data() {    return {      msg: "使用element-ui测试",    };  },}; h1,h2 {  font-weight: normal;}ul {  list-style-type: none;  padding: 0;}li {  display: inline-block;  margin: 0 10px;}a {  color: #42b983;}

3.3 运行效果

在cmd运行命令npm run dev 然后访问http://localhost:8080，效果如下：