五分钟带你玩转vue（六）element组件

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，封装很多常用组件，官网是https://element.eleme.cn/#/zh-CN/component/installation，下面就简单介绍 element。

安装和引入

  

   

    

     

    
    

     

      npm i element-ui -S
     
    
   

    

     

    
    

     

      npm install babel-plugin-component -D
     
    
  
 

然后，将 .babelrc 修改为：

  

   

    

     

    
    

     

      {
     
    
   

    

     

    
    

     
  "presets": [
     
    
   

    

     

    
    

     

          ["env", {
     
    
   

    

     

    
    

     
      "modules": false,
     
    
   

    

     

    
    

     
      "targets": {
     
    
   

    

     

    
    

     
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          }],
     
    
   

    

     

    
    

     
    "stage-2"
     
    
   

    

     

    
    

     

        ],
     
    
   

    

     

    
    

     
  "plugins": ["transform-vue-jsx", "transform-runtime"],
     
    
   

    

     

    
    

     
  "env": {
     
    
   

    

     

    
    

     
    "test": {
     
    
   

    

     

    
    

     
      "presets": ["env", "stage-2"],
     
    
   

    

     

    
    

     
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node", [
     
    
   

    

     

    
    

     
        "component",
     
    
   

    

     

    
    

     

              {
     
    
   

    

     

    
    

     
          "libraryName": "element-ui",
     
    
   

    

     

    
    

     
          "styleLibraryName": "theme-chalk"
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

            ]]
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      }
     
    
  
 

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

  

   

    

     

    
    

     

      // 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 { Button, Select, Option } from 'element-ui';
     
    
   

    

     

    
    

     

      import 'element-ui/lib/theme-chalk/index.css';
     
    
   

    

     

    
    

     

      Vue.use(Button)
     
    
   

    

     

    
    

     

      Vue.use(Select)
     
    
   

    

     

    
    

     

      Vue.use(Option)
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      Vue.config.productionTip = false
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /* eslint-disable no-new */
     
    
   

    

     

    
    

     

      new Vue({
     
    
   

    

     

    
    

     
    el: '#app',
     
    
   

    

     

    
    

     

          router,
     
    
   

    

     

    
    

     
    components: { App },
     
    
   

    

     

    
    

     
    template: '<App/>'
     
    
   

    

     

    
    

     

      })
     
    
  
 

使用

将代码直接复制过来就可以啦。

  

   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     

      <el-select v-model="value" filterable placeholder="请选择">
     
    
   

    

     

    
    

     
    <el-option
     
    
   

    

     

    
    

     
      v-for="item in options"
     
    
   

    

     

    
    

     
      :key="item.value"
     
    
   

    

     

    
    

     
      :label="item.label"
     
    
   

    

     

    
    

     
      :value="item.value">
     
    
   

    

     

    
    

     
    </el-option>
     
    
   

    

     

    
    

     
  </el-select>
     
    
   

    

     

    
    

     

      </template>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     

      name: 'HelloWorld2',
     
    
   

    

     

    
    

     

      data() {
     
    
   

    

     

    
    

     
      return {
     
    
   

    

     

    
    

     
        options: [{
     
    
   

    

     

    
    

     
          value: '选项1',
     
    
   

    

     

    
    

     
          label: '黄金糕'
     
    
   

    

     

    
    

     

              }, {
     
    
   

    

     

    
    

     
          value: '选项2',
     
    
   

    

     

    
    

     
          label: '双皮奶'
     
    
   

    

     

    
    

     

              }, {
     
    
   

    

     

    
    

     
          value: '选项3',
     
    
   

    

     

    
    

     
          label: '蚵仔煎'
     
    
   

    

     

    
    

     

              }, {
     
    
   

    

     

    
    

     
          value: '选项4',
     
    
   

    

     

    
    

     
          label: '龙须面'
     
    
   

    

     

    
    

     

              }, {
     
    
   

    

     

    
    

     
          value: '选项5',
     
    
   

    

     

    
    

     
          label: '北京烤鸭'
     
    
   

    

     

    
    

     

              }],
     
    
   

    

     

    
    

     
        value: ''
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </script>
     
    
  
 

文章来源: baocl.blog.csdn.net，作者：小黄鸡1992，版权归原作者所有，如需转载，请联系作者。

原文链接：baocl.blog.csdn.net/article/details/104729978