VUE3 学习笔记(八)引入 EasyUI for Vue

VUE3 学习笔记(八)引入 EasyUI for Vue_第1张图片

 

目录

一、什么是 EasyUI?

二、安装EasyUI for Vue3

1. 使用NPM安装

2. 导入EasyUI

三、安装完成出现问题解决


一、什么是 EasyUI?

  1. easyui是一个基于jQuery、Angular、Vue和React的用户界面组件的集合。
  2. easyui为构建现代的、交互式的、javascript应用程序提供了基本功能。
  3. 使用easyui,你不需要写很多javascript代码,你通常通过写一些HTML标记来定义用户界面。
  4. 完整的HTML5网页的框架。
  5. easyui在开发你的产品时节省了你的时间和规模。
  6. 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 上出现红色提示:

VUE3 学习笔记(八)引入 EasyUI for Vue_第2张图片

        出现这个问题的原因应该是v3-easyui并没有使用ts,所以出现了上述错误提示。提示中提供了两种解决方案。第一是尝试:npm i --save-dev @types/v3-easyui 经过测试是不成功的;第二是在一个 .d.ts 文件中添加一个这样的声明:declare module 'v3-easyui';  那么我们就把这个声明添加到根目录下文件 env.d.ts 中,如果没有这个文件,可以创建一个。

VUE3 学习笔记(八)引入 EasyUI for Vue_第3张图片

         添加完成后,红色提示即可自动消失!

你可能感兴趣的:(Vue,EasyUI,easyui,学习,笔记)