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

落日映苍穹つ 2024-02-19 12:41 30阅读 0赞

**主要操作技能：**

1>去官网查看[http://element-cn.eleme.io/2.4/\#/zh-CN/component/quickstart][http_element-cn.eleme.io_2.4_zh-CN_component_quickstart]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_27_color_FFFFFF_t_70][]

借助 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>

**效果：**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_27_color_FFFFFF_t_70 1][]**

[http_element-cn.eleme.io_2.4_zh-CN_component_quickstart]: http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_27_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/faf9e89e4ad74bf4b1ee587861c1f2d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_27_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f994e1cfa14142ddacd1656e35f01b1f.png