博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
怎么查看elementui版本_2021新年 Vue3.0 + Element UI 尝鲜小记
阅读量:1548 次
发布时间:2019-04-21

本文共 971 字,大约阅读时间需要 3 分钟。

2021年,又是新的一年,Vue 已经发布 3.0 版本,最好用的 UI 组件库 Element UI 也发布了适配 Vue3.0 的新版本,是时候开始学习一下这两个新技术。

本文主要记录了使用 Vue CLI 来完成项目搭建的过程。

安装升级最新的 Vue CLI 4.x

npm install -g @vue/cli

输入vue -V (大写的V) 查看版本 @vue/cli 4.5.9,一定要安装新版,不然使用不了 Vue

创建 Vue 3.0 版本的项目

536a3db5f1cfdeb934a33261cbca88e6.png

如图,使用 vue create my-app 创建项目,会有如下提示,选择中间项可以直接创建3.0的项目,选择最后一项,可以手动选择创建2.0或者3.0版本和其他配置项。
项目引入 Element Plus
Element UI 也发布了对应 Vue 3.0 的升级版本 Element Plus https://github.com/element-plus/element-plus 使用 Vue CLI 可以一键引入进来

cd my-app vue add element-plus npm run serve

bcac9e8b8890aab79b452a2034a7a8b6.png

一路回车确认,Element Plus 就自动添加到项目里了。这样,使用了 Vue 3.0 + Element Plus 组件库的项目就完成搭建。

a8ac8bbf94cd53cd79d7d1802ac28ecd.png

学习 Vue 3.0 入口文件的变化

打开生成的项目学习一下,相对于2.0版本的引入略有不同,3.0 使用 createApp(App) 创建Vue的实例,然后使用熟悉的use,进行引入 Element UI 组件库。

import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import { createApp } from 'vue' import App from './App.vue'  createApp(App).use(ElementPlus).mount('#app')

项目代码分享https://github.com/element-plus/element-plus-starter

2021 新的一年,也要好好学习 Vue 3.0 和 Element UI 呀。

转载地址:http://xqrdy.baihongyu.com/

你可能感兴趣的文章
JAVA字符串编码转换常用类
查看>>
[实变函数]3.3 可测集类
查看>>
跟锦数学171217-180630
查看>>
前端 html input标签 disable 属性
查看>>
MySQL的mysqldump工具的基本用法(转载)
查看>>
Python之random
查看>>
【IE大叔开玩笑】之——CSS设置IE6中容器高度的BUG
查看>>
EditText 文本内容输入限制
查看>>
转,python的匿名函数lambda解释及用法
查看>>
与FPGA相关的独热码
查看>>
构造方法
查看>>
linux下文件打包、压缩详解
查看>>
js类型判断
查看>>
systemd(CentOS7)启动zookeeper
查看>>
测试相关
查看>>
java.lang.ClassCastException: com.sun.proxy.$Proxy0 cannot be cast to java.sql.Connection异常问题解决...
查看>>
[CQOI 2018]社交网络
查看>>
HTML5基础总结
查看>>
Android Studio开发入门-引用jar及so文件
查看>>
ADO constants include file for VBScript
查看>>