element-plus 一个vue3.xUI框架 (element-ui的3.x 版初体验)
2020-11-04 13:17
375 查看
官方文档已更新: 点击跳转
突然发现已经半年没更新的element-ui更新了
更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。
先来上手体验一下
首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程已经很简洁了,这里就不多说了。建好之后,直接开始安装吧
npm i element-plus
为了方便,直接采取全部引入的方式
src/plugins/element.ts
import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' export default (app: any) => { app.use(ElementPlus) }
src/main.ts
import router from './router' import store from './store' import App from './App.vue' import { createApp } from 'vue' import installElementPlus from './plugins/element' const app = createApp(App) installElementPlus(app) app.use(store).use(router).mount('#app')
在页面中加一个按钮
<el-button type="primary">el-button</el-button>
在新版的vue3.x版本中还保留了原有的生命周期函数
create 1c1bf d(){ this.$message("message") },
打印了一下this
更新补充:
element-plus按需引入
src/plugins/element.ts
import { Button, Message } from 'element-plus' export default (app) => { app.use(Button) app.use(Message) }
babel.config.js
module.exports = { "presets": [ "@vue/cli-plugin-babel/preset" ], "plugins": [ [ "component", { "libraryName": "element-plus", "styleLibraryName": "theme-chalk" } ] ] }
在vue3.0 setup中使用
import { setup } from 'vue-class-component' import { getCurrentInstance } from 'vue' export default { name: 'App', components: { }, setup(e){ const {ctx} = getCurrentInstance() ctx.$message("mesage") } }
更新:ctx 打包之后无法调用
$message,可以使用
proxy
import { getCurrentInstance } from 'vue' export default { name: 'App', components: { }, setup(){ const {proxy} = getCurrentInstance() proxy.$message("mesage") } }
相关文章推荐
- Vue+ElementUI搭建一个后台管理框架
- 用vue+elementUI搭建一个后台管理系统框架
- Vue.js UI框架 - element
- Vue-cli webpack,element-ui搭建一个完整的项目
- vue.js + element UI的一个注意点
- 前后分离敏捷开发框架源码基于Vue+ElementUI+Springboot后台权限
- Vue.js UI框架 - element
- Vue+Element UI 下,如何给一个表单设置自定义规则或多个验证规则(:rules)
- Vue.js UI框架 - element
- Vue.js UI框架 - element
- vue+element-ui+ajax实现一个表格的实例
- Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路
- 【记录】vue-cli+element-ui 制作一个侧边栏组件(抽屉Drawer)
- Vue.js UI框架 - element
- 用vue-cli搭建一个项目配合element-ui做一个公司需要的后台管理系统
- 如何新建一个Vue项目并导入element-ui的模板
- vue+element-ui+ajax的一个表格实例
- 手把手教你用vue-cli搭建vue项目,elementUI框架。
- 关于vue的UI框架Element,多层嵌套v-for循环下的表单验证且二级不在循环内的特殊
- 更新一个很好的vue+element-ui+mock的经典demo