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>

效果：

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

猜你喜欢