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
 

编写代码：

<template>
	<div id="home">
		<h1>{{msg}}</h1>
		<el-button type="warning" round>警告按钮</el-button>
		<el-button type="danger" round>危险按钮</el-button>
		<i class="el-icon-delete"></i><br />
		<el-input v-model="input" placeholder="请输入内容"></el-input><br /><br />

		<el-select v-model="value6" placeholder="请选择">
			<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
				<span style="float: left">{{ item.label }}</span>
				<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
			</el-option>
		</el-select>


	</div>
</template>

<script>
	export default {
		name: 'home',
		data() {
			return {
				msg: 'Home首页',
				input: '',
				value6: '',
				cities: [{
					value: 'Beijing',
					label: '北京'
				}, {
					value: 'Shanghai',
					label: '上海'
				}, {
					value: 'Nanjing',
					label: '南京'
				}, {
					value: 'Chengdu',
					label: '成都'
				}, {
					value: 'Shenzhen',
					label: '深圳'
				}, {
					value: 'Guangzhou',
					label: '广州'
				}]
			}
		}
	}
</script>

效果：