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

Element UI 安装

• npm安装。

  npm i element-ui -S
  

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

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)
  });
  

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

  npm run serve
  

  

• 按需引入。

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

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>
  

• 运行结果。

  

  扫描二维码关注公众号，回复： 13781831 查看本文章

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

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