vue3
文章平均质量分 50
余温无痕
这个人很懒
展开
-
vue3 vue3-particles粒子使用方法
vue3-particles使用方法原创 2023-10-30 10:11:48 · 6107 阅读 · 8 评论 -
vue2/vue3 EventBus事件总线(用于组件通信)
Vue 3.x 移除了 $on 、 $off 和 $once 这几个事件 API,使得vue3.x不能像2.x一样,不能直接使用EventBus。vue3 推荐 mitt 和 tiny-emitter,这里使用mitt。中定义一个新的bus对象并且挂载在原型链上,是全新的Vue实例。原创 2023-04-04 17:58:11 · 1488 阅读 · 0 评论 -
vue3 常用的组件互相通信(父子、兄弟、爷孙、任意组件)
方案父传子子传父propsemitsv-modelemitsrefemitsprovideinjectEventBusemit / on(可用于兄弟、爷孙、全局)emit / on(可用于兄弟、爷孙、全局)Vuex作用于全局作用于全局pinia作用于全局作用于全局1、父传子主要用到props属性传递,父组件通过自定义属性给子组件传值,子组件用props接收子组件 TitleMore.vue// 子组件原创 2023-04-04 16:08:49 · 19502 阅读 · 4 评论 -
vue3 wangeditor/editor富文本使用和编辑
vue3 wangeditor/editor富文本使用和编辑原创 2023-02-22 10:22:28 · 3021 阅读 · 0 评论 -
vue 关于日期、时间戳格式的一些操作
vue 关于日期、时间戳格式的一些操作。原创 2023-02-18 14:34:58 · 711 阅读 · 0 评论 -
vue3 腾讯地图输入地址或拖动标记获取经纬度
vue3 腾讯地图输入地址或拖动标记获取经纬度原创 2022-07-20 17:13:01 · 3588 阅读 · 0 评论 -
vue3 element-ui plus:Extraneous non-props attributes (ref_key) were passed to component ....
警告:Extraneous non-props attributes (ref_key) were passed to component but could not be automatically inherited because component renders fragment or text root nodes....原创 2022-06-28 10:45:09 · 3091 阅读 · 1 评论 -
vue3 watch用法
1、监听路由变化import { ref, watch } from "vue"import { useRoute } from "vue-router"<script setup>const route = useRoute()const showPage = ref(false)watch( () => route.path, (val) => { if (val === "/") { showPage.v原创 2022-04-11 10:29:25 · 8903 阅读 · 0 评论 -
vue3+vite 安装和配置less
1、安装// 安装lessnpm i less-loader less --save-dev2、vite.config.js配置css: { preprocessorOptions: { less: { modifyVars: { hack: `true; @import (reference) "${path.resolve("src/assets/css/b..原创 2022-04-07 10:43:24 · 26187 阅读 · 2 评论 -
vue3 clipboard复制文本
1、安装 npm install --save @soerenmartius/vue3-clipboard2、使用// main.jsimport { createApp } from 'vue'import App from './App.vue'import router from "./router";import { VueClipboard } from "@soerenmartius/vue3-clipboard"const app = createApp(App)原创 2022-03-31 15:04:24 · 2097 阅读 · 0 评论 -
vue3 使用particles.vue3插件粒子
效果(可以修改多种不同的样式效果)1、安装npm install particles.vue32、main.jsimport { createApp } from 'vue'import App from './App.vue'import router from "./router";import Particles from "particles.vue3"; // 引入const app = createApp(App);app.use(router).use原创 2022-03-30 17:49:41 · 6466 阅读 · 10 评论 -
vue3 <script setup>下reactive用法
第一种:不使用toRefs解构的,也就是在template中使用对象引用方式<template> <div class="test-box"> <p @click="changeText">{{ data.text }}</p> <p @click="changeArrs">{{ data.arrss }}</p> </div></template>&l原创 2022-03-30 14:28:55 · 5870 阅读 · 0 评论 -
vue3 pinia的安装和使用
Pinia最初是在 2019 年 11 月左右重新设计使用Composition API的 Vue Store 外观的实验。从那时起,最初的原则仍然相同,但 Pinia 适用于 Vue 2 和 Vue 3 ,并且不需要你使用组合 API。Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案,Pinia 2 是对应 Vue3 的版本// 安装npm i pinia还需再安装个数据持久化插原创 2022-03-29 10:13:24 · 4328 阅读 · 1 评论 -
vue 数字滚动count-to插件,支持小数(包含vue3,网上整理)
vue3npm install vue3-count-to --save<count-to :startVal="0" :endVal="3000.22" :decimals="2" :duration="3000"></count-to>import { CountTo } from 'vue3-count-to';components: { CountTo },参考地址:https://github.com/xiaofan9/v...原创 2021-12-08 11:53:06 · 16627 阅读 · 0 评论 -
vue3 keep-alive+vuex配合使用(简单易用)
整理之后发现vue3的keep-alive和vue2相差也不是太大,重点是写法改变了1、App.vue<template> <router-view v-slot="{ Component }"> <keep-alive :include="includeList"> <component :is="Component"></component> </keep-alive> </router-view&原创 2021-09-10 09:05:24 · 1980 阅读 · 5 评论 -
vue3+ts Type ‘xxx[]‘ is not assignable to type ‘never[]‘
原因是:ts默认初始化空数组为 never[] 类型,跟你赋值的数据类型不匹配修改为:arr_data:[]asany[],即可原创 2021-08-20 14:35:50 · 11750 阅读 · 0 评论 -
vue3+ts 引用本地图片路径的解决方案
因为vue3相对vue2来说已经取消了“require”这块,在vue2中不管是页面还是js板块中引用图片途径的话都可以require('@images/xxx.png'),但是经过测试发现vue3如果这种引用的话是会报错的,提示找不到requirevue2中的vue.config.js配置@images别名下面是正式在vue3引用的方法首先说下我这个图片放置路径,我是放在assets/images/文件夹中1、在页面内引用<img src="../asset..原创 2021-08-20 09:44:12 · 17149 阅读 · 10 评论 -
vue3 vue-router4安装和基础使用
前提:我的vue3是结合ts的1、安装// 用这个命名安装router4版本,// 不要用npm install vue-router,这个是安装router3版本的npm install vue-router@42、在src文件下新建一个router文件夹,然后在这下面新建一个index.ts文件// createWebHashHistory 是hash模式就是访问链接带有#// createWebHistory 是history模式import { createRou原创 2021-05-20 17:53:16 · 7655 阅读 · 1 评论 -
vue3 vite.config.ts 基础配置,持续更新
import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import path from "path";export default defineConfig({ plugins: [vue()], base: "./", resolve: { alias: { // 如果报错__dirname找不到,需要安装node,执行npm install @types/node --s.原创 2021-05-18 15:43:51 · 24524 阅读 · 9 评论 -
vue3+vite+ts 安装遇到的一些问题和解决方案
下面问题都是一个坑一个坑踩过来的,借鉴了网上很多资料,这里只提vite安装,不提vue-cli1、目前vite安装方式有两种,如果安装ts的话推荐npm init @vitejs/app,因为这个会帮你配置好ts,省得还要自己装下ts和配置1、npm init @vitejs/app // 如果还要安装ts的话,推荐这个2、npm init vite-app <project-name>1.1、如果你使用npm init @vitejs/app命名安装,确保node.原创 2021-05-14 18:01:18 · 14705 阅读 · 10 评论