在uni-app中使用element-ui
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
uni-app的相关UI组件库中可能会没有你想要的功能组件,自己去开发的话需要花很多时间,此时咱们可以将别的UI组件库给安装到uni-app中来,达到直接使用该UI组件库的功能组件,例如,安装element-ui
uni-app使用element-ui需安装以下插件
npm i element-ui -S
按需引入组件需要装以下插件
npm install babel-plugin-component -D
当你安装完以上插件后,需要在main.js中进行引入,例如引入全部:
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
el: '#app',
render: h => h(App)
})
如果需要按需引入的话,需要装以下插件:
npm install async-validator@1.11.5
安装完后需要配置一下.babelrc
文件:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
当你做完以上步骤后,你可能已经迫不及待的想要运行了,但是运行后你会发现居然报错了,例如:
Cannot find module ‘core-js/library/fn/object/assign
此时你需要安装一下这个插件:
npm install async-validator@1.11.5
以上为直接在main.js
中引入,下面是另外一种引入方式:
在 src
文件夹中新建我们的 element
文件夹,并在里面新建一个 index.js
文件
在index
文件中去书写我们需要引入的部分组件
// 导入自己需要的组件
import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col } from 'element-ui'
const element = {
install: function (Vue) {
Vue.use(Select)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Input)
Vue.use(Tree)
Vue.use(Dialog)
Vue.use(Row)
Vue.use(Col)
}
}
export default element
最后在 main.js
中引入该文件
// css样式引入
import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'
Vue.use(element)
这样做更方便管理
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)