Vue.js框架--Ui框架的Element UI 按需引入（二十五）

主要操作技能：

 1>去官网查看http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart

 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
  
  1. 必须安装  cnpm i element-ui -S 
 
  2  安装   cnpm install babel-plugin-component -D
     
  3. 修改.babelrc 为：
     {
      "presets": [["env", { "modules": false }]],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }
    
4. 在main.js文件中引入需要的组件
     import { Button, Select } from 'element-ui';
     Vue.use(Button)
     Vue.use(Select)
     
5.发生异常： @element-ui/lib/theme-chalk/fonts/element-icons.ttf
          复制文件到webpack.config.js中 
     ， {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      }

 

6.根据下面的对应的引入组件
    el-button   ==>Button
    el-select   ==>Select
   el-option   ==>Option
   el-input    ==>Input
 

编写代码：

效果：