基于Vue2的Element UI组件库基本使用测试_element-ui 测试

Element UI 安装

• npm安装。

  npm i element-ui -S
  1

  如果出现报错，请查看我的上一篇文章！

Element UI 引入

• 全局引入。

  在 main.js 中写入以下内容：

  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)
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  然后启动项目，如果没有报错，那就是成功啦。

  npm run serve
  1

  

• 按需引入。

  这个适用于，当项目比较大的时候，按需引入就会使得文件打包后较小，在初学时，就会显得比较繁琐。

Element UI 使用

• 将项目中默认的组件HelloWorld删除，然后将项目中的主组件App的一些内容和样式删除，从element ui官网中找一个最基本的按钮，然后开始测试Element UI使用咯。

  <template>
    <div id="app">
     <el-button type="success">成功按钮</el-button> 
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'App',
    components: {
      
    }
  }
  </script>
  
  <style>
  
  </style>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

• 运行结果。

  

测试完成后，就开始真正的项目编写了奥！

大家以后页面中想使用什么样式，就去element ui官网拉过来使用就可以了奥！