首页 >> js开发 >> jselement-plus一个vue3.xUI框架(element-ui的3.x 版初体验)js大全
jselement-plus一个vue3.xUI框架(element-ui的3.x 版初体验)js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
突然发现已经半年没更新的element-ui更新了
更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。
先来上手体验一下
首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程已经很简洁了,这里就不多说了。建好之后,直接开始安装吧
npm i element-plus
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)
}
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')
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
el-button
在新版的vue3.x版本中还保留了原有的生命周期函数
created(){
this.$message("message")
},
created(){
this.$message("message")
},
打印了一下this
更新补充:element-plus按需引入element-plus按需引入element-plus按需引入src/plugins/element.ts
import { Button, Message } from 'element-plus'
export default (app) => {
app.use(Button)
app.use(Message)
}
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"
}
]
]
}
module.exports = {
"presets": [
"@vue/cli-plugin-babel/preset"
],
"plugins": [
[
"component",
{
"libraryName": "element-plus",
"styleLibraryName": "theme-chalk"
}
]
]
}在vue3.0 setup中使用在vue3.0 setup中使用在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")
}
}
import { setup } from 'vue-class-component'
import { getCurrentInstance } from 'vue'
export default {
name: 'App',
components: {
},
setup(e){
const {ctx} = getCurrentInstance()
ctx.$message("mesage")
}
}官方文档已更新: 点击跳转点击跳转
更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。
先来上手体验一下
首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程已经很简洁了,这里就不多说了。建好之后,直接开始安装吧
npm i element-plus
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)
}
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')
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')在页面中加一个按钮
在新版的vue3.x版本中还保留了原有的生命周期函数
created(){
this.$message("message")
},
created(){
this.$message("message")
},
打印了一下this
更新补充:element-plus按需引入element-plus按需引入element-plus按需引入src/plugins/element.ts
import { Button, Message } from 'element-plus'
export default (app) => {
app.use(Button)
app.use(Message)
}
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"
}
]
]
}
module.exports = {
"presets": [
"@vue/cli-plugin-babel/preset"
],
"plugins": [
[
"component",
{
"libraryName": "element-plus",
"styleLibraryName": "theme-chalk"
}
]
]
}在vue3.0 setup中使用在vue3.0 setup中使用在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")
}
}
import { setup } from 'vue-class-component'
import { getCurrentInstance } from 'vue'
export default {
name: 'App',
components: {
},
setup(e){
const {ctx} = getCurrentInstance()
ctx.$message("mesage")
}
}官方文档已更新: 点击跳转点击跳转
相关文章:
- js简单谈谈offsetleft、offsetTop和offsetParentjs大全
- js微信小程序轮播图swiper代码详解js大全
- JavaScript可拖拽组件slider.js使用方法详解
- JavaScript解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
- jsaddEventListener()和removeEventListener()追加事件和删除追加事件js大全
- JavaScriptjs调用网络摄像头的方法
- JavaScript10分钟学会js处理json的常用方法
- js代码JavaScript实现浏览器网页自动滚动并点击的示例代码
- js小程序角标的添加及绑定购物车数量进行实时更新的实现代码js大全
- jsvue表单验证之禁止input输入框输入空格js大全