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

这篇具有很好参考价值的文章主要介绍了VUE3 学习笔记(八)引入 EasyUI for Vue。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

 

目录

一、什么是 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

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

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

         添加完成后,红色提示即可自动消失!文章来源地址https://www.toymoban.com/news/detail-419839.html

到了这里,关于VUE3 学习笔记(八)引入 EasyUI for Vue的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3学习笔记

    源码升级 Vue2是通过Object.defineProperty实现响应式,Vue3是通过 Proxy 实现响应式 重写虚拟DOM的实现和Tree-Sharking 1.1 使用Vue-cli创建 官方文档:Vue-cli 1.2 使用Vite创建 官方文档:V3 vite官网:Vite 什么是vite?—— 官网定义是下一代前端构建工具。 优势如下: 开发环境中,无需打包操

    2024年02月12日
    浏览(44)
  • [Vue3]学习笔记-customRef

    概念 按照文档中的说明:customRef 可以用来创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数,该函数接收 track 和trigger函数作为参数,并且应该返回一个带有 get 和 set 的对象。 其实大致意思就是,我们可以按照自己的业务需求去自定义

    2024年02月12日
    浏览(37)
  • vue3组件通信学习笔记

    父组件 子组件 父组件 子组件 子组件1 子组件2 父组件 子组件 父组件 子组件 父组件 子组件 父组件 子组件 父组件 子组件 孙子组件 1、选择式写法 1、info.js 2、在组件1中使用 3、在组件2中使用 2、组合式API写法 1、在modules文件夹下新建todo.js 2、在组件1中使用 3、在组件2中使

    2024年02月09日
    浏览(45)
  • Vue3学习笔记(9.6)

    Vue3混入 混入(mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。 选项合并 当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。 比如,数据对象在内

    2023年04月09日
    浏览(36)
  • 学习笔记之Vue3(七)

    一、Vue3简介 2020年9月18日,Vue.js发布3.0版本, 代号: One Piece (海贼王) 耗时2年多、2600+次提交、 30+个RFC、 600+次PR、 99位贡献者 github 上的tags地址: https://github.com/vuejs/vue-next/releases/tag/v3.0.0 二、Vue3带来了什么 1.性能的提升 打包大小减少41%; 初次渲染快55%,更新渲染快133%; 内存

    2024年02月07日
    浏览(35)
  • 【Vue3】学习笔记-生命周期

    Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名: beforeDestroy 改名为 beforeUnmount destroyed 改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下: beforeCreate === setup() created ======= setup() beforeMount === onBeforeMount mounted ======= onMo

    2024年02月11日
    浏览(44)
  • 【vue3】学习笔记--组件通信方式

    学习vue3总是绕不开vue2 vue3组件通信方式如下: props数据只读,从父组件传递到子组件,子组件内部不可直接更改 子组件需要使用defineProps方法接受父组件传递过来的数据 setup语法糖下局部组件无需注册直接可以使用 父组件 子组件 vue框架中事件分为两种:原生的DOM事件和自定

    2024年02月13日
    浏览(52)
  • 【Vue3】学习笔记-新的组件

    在Vue2中: 组件必须有一个根标签 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中 好处: 减少标签层级, 减小内存占用 什么是Teleport?—— Teleport 是一种能够将我们的 组件html结构 移动到指定位置的技术。 等待异步组件时渲染一些额外内容,让应

    2024年02月16日
    浏览(41)
  • Vue3 学习笔记(Day2)

    「写在前面」 本文为尚硅谷禹神 Vue3 教程的学习笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。推荐先按顺序阅读往期内容: 1. Vue3 学习笔记(Day1) 目录 3 Vue3 核心语法 3.1 选项式API 与 组合式API 3.2 setup 3.3 ref 和 reactive 3.4 computed 3.5 watch 3.

    2024年02月22日
    浏览(53)
  • Vue3 学习笔记(Day1)

    「写在前面」 本文为尚硅谷禹神 Vue3 教程的学习笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。 目录 0 课程介绍 1 Vue3 简介 2 创建 Vue3 工程 2.1 基于 vue-cli 创建 2.2 基于 vite 创建(推荐) 2.3 一个简单的效果 P1:https://www.bilibili.com/video/BV1Za4y

    2024年02月20日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包