当前位置: 首页 > Web前端 > vue.js

新年2021Vue3.0+ElementUI笔记

时间:2023-03-31 23:14:42 vue.js

2021又是一个新的一年,Vue发布了3.0版本,最好的UI组件库ElementUI也发布了适配Vue3.0的新版本,是时候开始学习了关于这两项新技术。本文主要记录使用VueCLI完成项目构建的过程。安装并升级最新的VueCLI4.xnpminstall-g@vue/cli,输入vue-V(大写V)查看版本@vue/cli4.5.9,一定要安装新版本,否则不会可以使用Vue3.如图创建Vue3.0版本项目,使用vuecreatemy-app创建项目,会有如下提示,选择中间项直接创建3.0项目,选择最后一项,可以手动选择创建2.0或3.0版本等配置项。引入ElementPlus的项目ElementUI也发布了Vue3.0对应的升级版ElementPlushttps://github.com/element-plus/element-plus使用VueCLI一键导入cdmy-appvueaddelement-plusnpmrunserve一路回车确认,ElementPlus会自动添加到项目中。这样使用Vue3.0+ElementPlus组件库的项目就完成了。了解Vue3.0入口文件的变化。打开生成的工程进行学习。与2.0版本的介绍略有不同。3.0使用createApp(App)创建Vue实例,然后使用熟悉的use导入ElementUI组件库。importElementPlusfrom'element-plus'import'element-plus/lib/theme-chalk/index.css'import{createApp}from'vue'importAppfrom'./App.vue'createApp(App).use(ElementPlus.mount('#app')项目代码分享https://github.com/element-pl...2021新的一年,要好好学习Vue3.0和ElementUI。