Vue3与Element-plus整合(win10)

221 阅读1分钟

参考文章地址 blog.csdn.net/sinat_30844…

一、 安装环境

检查环境

首先,确保已安装好node.js与npm、最新的vue3与对应的vue-cli

4.jpg

安装

npm install -g @vue/cli   #如果未安装vue3则执行此命令 2.jpg 安装成功 3.jpg

查看vue/cli版本

vue -V #查看vue-cli的版本,验证是否已安装

1.jpg

二、 全局引入

main.js 引入前

![5

main.js 引入后

6.jpg

新建MyBtn.vue文件

7.jpg

App.vue

8.jpg

9.jpg

二、 部署运行

命令: cnpm run serve 或 npm run serve

10.jpg

浏览器访问,报错

11.jpg

查看node.js版本

12.jpg

升级版本:确保已安装好node.js-v21.7及以上版本

13.jpg

升级教程 www.cnblogs.com/lijjj/p/120…

14.jpg

node.js官网 nodejs.org/en/download…

下载新版本

15.jpg

16.jpg

安装

17.jpg

18.jpg

19.jpg

20.jpg

21.jpg

22.jpg

23.jpg

24.jpg

25.jpg

node.js版本升级成功

26.jpg

安装 Element-plus 打开vue ui 可视化窗口,输入命令 vue ui

27.jpg 继续安装

20.jpg

28.jpg

29.jpg

30.jpg

31.jpg

32.jpg

33.jpg

34.jpg

35.jpg

36.jpg

继续运行项目 进入项目的根目录,输入命令:npm run serve

37.jpg

成功:

38.jpg