Element是基于Vue.js框架的一款UI组件库，它提供了丰富的UI组件，给开发者提供了快速搭建高质量Web应用/小程序的工具，是目前国内使用较为广泛的前端UI框架之一。
1. Element在小程序中的运用
由于小程序的架构限制，不能像Web应用一样直接引入外部的JS、CSS等资源，所以我们需要将Element的组件库转化为小程序组件库，以供小程序使用。
Element的小程序版本由各位开发者们利用Element源码基于微信小程序原有的组件和API适配而来，提供了与Element相似的使用方式和UI效果，藏身于GitHub。
2. Element小程序组件的创建
我们需要完成的主要工作是将Element的Vue组件转变为小程序组件，由此我们需要分为以下几步：
* 安装搭配工具
由于小程序与Vue的语法存在差异，导致我们需要用到一些转化工具来将Vue组件转化为小程序组件。目前，较流行的是mpvue和uni-app。
* 更改原有的Vue组件
将样式文件进行更改，更改Vue组件使用的标签名和class名，适配小程序的标签库和CSS选择器。
* 打包转化
将更改后的Vue组件打包成小程序组件库，导入小程序项目，即可在小程序中使用。
3. 实现Element小程序组件的案例
以Element的Button为例，实现Element小程序组件：
* 安装Element
在小程序中使用Element，首先需要通过npm安装Element：
```
npm i element-ui -S
```
* 配置Webpack
需要在小程序的Webpack.config.js文件中进行配置，引入Element的CSS文件和对应的loader：
```
plugins: [
new MpvuePluginLoader({
match: /\.(png|jpe?g|gif)(\?.*)?$/,
limit: 10000
}),
new MpvuePluginLoader({
match: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
limit: 10000
}),
new MpvuePluginLoader({
match: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
limit: 10000
}),
new MiniCssExtractPlugin({
filename: 'styles.css'
})
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'mpvue-loader',
options: {
isWepy: false,
cssLoaderOption: {
localIdentName: '[name]-[hash:base64:5]',
camelCase: true
}
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader'
}
]
},
resolve: {
alias: {
'vue$': 'mpvue',
'@': resolve('src'),
'iview$': 'iview/dist/mp/index',
'vant$': 'vant-weapp/dist/common/style/index.css'
},
extensions: ['.vue', '.js', '.json'],
},
```
* 导入Element小程序组件
将原有的Vue组件更改为小程序组件，并在需要使用组件的小程序页面中导入：
```
```
4. 总结
Element是一款强大的UI组件库，提供了许多易用且美观的UI组件，能够方便地满足开发者的需求。通过本文的介绍，可以发现Element也可以在小程序中使用，不论是开发网页还是小程序都可以使用这款UI组件库，为提升开发效率注入了强有力的支持。
