vue3

本文本记录了使用 Vue3+Vite+ElementPlus 从0开始搭建一个前端工程会面临的常见问题，没有技术深度，但全都是解决实际问题的干货，可以当作是问题手册以备后用。本人日常工作偏后端开发，因此，文中的一些前端术语描述可能不严谨，敬请谅解。重点是：这里记录的解决方案都是行之有效果的，拿来即可 ......

注意： 使用 Hooks 来做的话，需要封装一个以 use 开头的函数，自定义 Hooks 有一个潜规则，就是要 use 开头 一、相关链接 ① 已经封装好可直接使用的：https://vueuse.org/core/useMounted/ ② 为什么要在Vue3中多使用Hooks？好处是啥？ ：  ......

版本 "mitt": "^3.0.1" 1、npm install mitt 2、项目下创建文件夹eventBus 建 myEventBus.js import mitt from 'mitt'export default mitt() 3、组件里监听 组件A import myEventBus f ......

1、npm install pinia 2、在项目目录建store文件夹创index.js import { createPinia,defineStore } from "pinia";const pinia = createPinia()pinia.state.valueconst token ......

element Plus的虚拟化表格用的是lang=tsx,先安装 cnpm i @vitejs/plugin-vue-jsx 然后去vite.config.ts里加配置 import vueJsx from '@vitejs/plugin-vue-jsx' plugins: [ vue(), vu ......

<script setup> import { computed, ref } from "vue"; // const blog = ref({ // title: "Vue3 基础教程", // content: "Vue3 在 Vue2 的基础上做了很多优化", // link: "https ......

原文地址:vue3+tsx开发语法详解 - 知乎 很多组件库都使用了TSX的方式开发，主要因为其灵活性比较高，TSX和SFC开发的优缺点就不介绍了，这里主要说一下将SFC项目改造为TSX的过程。 安装JSX库 pnpm install @vitejs/plugin-vue-jsx -D 安装完之后在 ......

原文地址:在 vue3 中优雅的使用 jsx/tsx - 掘金 前言 相信 react 的伙伴对于 jsx/tsx 都不陌生吧，现在在 vue3 中也可以使用 jsx/tsx 语法拉。 安装插件（@vitejs/plugin-vue-jsx） vite官方提供了官方的插件来支持在vue3中使用jsx ......

npm init vue@latest 看需求选择 紧接着cd 到自己的项目文件下 npm i一下安装依赖 npm run dev 启动项目 ......

ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值 <template> <div> <button @click="changeMsg">change</button> <div>{{ message }}</div> ......

项目代码同步至码云 weiz-vue3-template pina 是 vue3 官方推荐的状态管理库，由 Vue 核心团队维护，旨在替代 vuex。pina 的更多介绍，可从 pina官网 查看 特点 更简洁直接的 API，提供组合式风格的 API 支持模块热更新和服务端渲染 对TS支持更为友好 ......

效果如图： template部分： <view class="item"> <view class="box"> <view class="content"> <view class="head">优惠券</view> <view class="content-box1"> <view class= ......

https://blog.csdn.net/qq_27517377/article/details/123163381 https://blog.csdn.net/qq_27517377/article/details/123166367 vue3 setup 父组件向子组件传递参数 <templa ......

注意：在模拟器用鼠标滚动是不会切换光标的，因为使用的是触摸滑动。【自定义类型贴在最后了】 script 部分如下： import { onMounted } from 'vue' import type { orderDetail } from '@/types/category' import t ......

pnpm安装 一些优势：比同类工具快 2倍 左右、节省磁盘空间... https://www.pnpm.cn/ 安装方式：npm install -g pnpm 创建项目：pnpm create vue ESLint & prettier 配置代码风格 环境同步： 安装了插件 ESlint，开启保存 ......

会出现 ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of ::v-deep <inner-selector>.的报错 ：：v-depth用作组合子已被弃用。使用：dee ......

1.defineComponent语法 { "Print to console": { "prefix": "vue3", "body": [ "<template>", "<div class=\"container\">", " ", "</div>", "</template>", "<scr ......

标题：基于uQRCode封装的Vue3二维码生成插件 摘要：本文介绍了一种基于uQRCode封装的Vue3二维码生成插件，可以在Javascript运行环境下生成二维码并返回图片地址。该插件适用于所有Javascript运行环境，并且支持微信小程序。本文将详细介绍该插件的使用方法，并给出一个基于Vu ......

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。 组件化对 ......

<script setup lang="ts"> import { SoundOutlined } from '@ant-design/icons-vue' const props = defineProps({ title: { type: String, default: '' }, color ......

import { decodeRGBE } from '@derschmale/io-rgbe'; //引入io-rgbe //读取Hdr文件 const ReadHdrFile = (buffer: ArrayBufferLike & { BYTES_PER_ELEMENT?: undefined ......

开始 在编写组件库之前，我们首先要对整个代码项目的解构有一个清晰的划分，以及用到的大多数规范，和代码风格有一个约定，这篇文章主要就围绕着下面图中的几个问题展开描述一下。 1、搭建 monorepo 环境 我们使用pnpm当做包管理工具，用pnpm workspace来实现monorepo。可以看下面 ......

官方资料 wangEditor 官网 效果展示 准备工作 这里按照 wangEditor 官网提供的 Vue3 Demo 操作就行，下面的内容可以直接跳过 安装 yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --sav ......

bug：reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->at us ......

项目中的问题 1. 当我们在维护自己的博客或者自己的网站的时候没有特别好的服务器就会响应特别的慢 2. 当我们项目特别大的时候也会首屏加载特别慢而且 vue项目打包后的js文件特别的庞大 还要加载各种资源就会特别的卡顿 3.当我们项目中用到了一些3D效果各种3D资源部特别的大的时候根本加载不出来 解 ......

什么是Pinia 官方文档：https://pinia.vuejs.org/zh/introduction.html Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = re ......

一、资料链接 Arco Design 的官网：https://arco.design/ Arco Design开箱的管理系统预览：https://vue-pro.arco.design/login vue3 项目创建的指南：https://arco.design/vue/docs/pro/start ......

引用组件 // city_dialog.vue //PopWindow 弹出层组件 //AreaList 省市区数据组件 //areaData 省市区数据 <PopWindow :dialogVisible="dialogVisible" title="省市区选择" sizeType="large" ......

父组件 //引入子组件 <jyqk :selectData="selectData" ref="jyqk_ref"></jyqk> import fxjy from "./components/fxjy.vue"; const jyqk_ref = ref<any>(); const change_ ......

//基于准备好的dom，初始化echarts实例 const barDOM: any = ref(); var myChart: any; let echartNull: any = null; // 渲染echart const init_chart = () => { if (myChart ! ......