目录
一、什么是 EasyUI?
二、安装EasyUI for Vue3
1. 使用NPM安装
2. 导入EasyUI
三、安装完成出现问题解决
一、什么是 EasyUI?
- easyui是一个基于jQuery、Angular、Vue和React的用户界面组件的集合。
- easyui为构建现代的、交互式的、javascript应用程序提供了基本功能。
- 使用easyui,你不需要写很多javascript代码,你通常通过写一些HTML标记来定义用户界面。
- 完整的HTML5网页的框架。
- easyui在开发你的产品时节省了你的时间和规模。
- easyui非常简单但功能强大。
EasyUI分别支持Angular、Vue、React框架,本片我们讨论的是关于Vue3的。
二、安装EasyUI for Vue3
我的开发环境是:Vue3 + ts + vite。版本如下:
序号 | 项目 | 版本 |
1 | Vue | 3.2.47 |
2 | vite | 4.1.4 |
3 | v3-easyui(即将安装) |
3.0.6 |
安装步骤:
1. 使用NPM安装
npm install v3-easyui --save
2. 导入EasyUI
在 main.ts 中插入如下语句
import 'v3-easyui/dist/themes/default/easyui.css';
import 'v3-easyui/dist/themes/icon.css';
import 'v3-easyui/dist/themes/vue.css';
import { createApp } from 'vue'
import EasyUI from 'v3-easyui';
createApp(App).use(EasyUI).mount('#app')
三、安装完成出现问题解决
由于我的项目默认是使用 ts 而不是 js,所以安装完成后,看到main.ts 的 v3-easyui 上出现红色提示:
出现这个问题的原因应该是v3-easyui并没有使用ts,所以出现了上述错误提示。提示中提供了两种解决方案。第一是尝试:npm i --save-dev @types/v3-easyui 经过测试是不成功的;第二是在一个 .d.ts 文件中添加一个这样的声明:declare module 'v3-easyui'; 那么我们就把这个声明添加到根目录下文件 env.d.ts 中,如果没有这个文件,可以创建一个。
文章来源:https://www.toymoban.com/news/detail-419839.html
添加完成后,红色提示即可自动消失!文章来源地址https://www.toymoban.com/news/detail-419839.html
到了这里,关于VUE3 学习笔记(八)引入 EasyUI for Vue的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!