随笔分类 - Vue再出发
摘要：1、vite.config.ts import { fileURLToPath, URL } from 'node:url' import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' impor
阅读全文
摘要：export const getConsumablesInfoReq = (current, size, queryVo) => { return request({ url:'/api/manage/list', method:'get', params:{ current, size, ...q
阅读全文
摘要：一、打开nginx.conf文件 nginx->conf->nginx.conf 二、重启nginx服务 nginx -s reload
阅读全文
摘要：案例 <template> <div class="container"> <div class="screen" ref="screen"> <!-- 顶部 --> <div class="top"></div> <!-- 底部 --> <div class="bottom"> <!-- 左侧 -
阅读全文
摘要：1、下载 npm i nprogress 2、引入 import NProgress from 'nprogress' import 'nprogress/nprogress.css' // 基础样式 3、使用 NProgress.start() // 开始进度条 NProgress.done()
阅读全文
摘要：let isFull = document.fullscreenElement if(!isFull){ // 不是全屏,设置全屏 document.documentElement.requestFullscreen() } else { // 全屏，退出全屏 document.exitFullsc
阅读全文
摘要：1、引入 import {nextTick} from "vue" 2、使用 nextTick(() => { // 内容 })
阅读全文
摘要：一、册全局组件 el-icon // main.ts // 如果您正在使用CDN引入，请删除下面一行。 import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) for (con
阅读全文
摘要：一、安装依赖 npm install sass-embedded 二、配置全局变量 1、新建文件 src/styles/variables.scss 2、配置Vite 修改 vite.config.js css: { preprocessorOptions: { scss: { additional
阅读全文
摘要：一、自定义插件 参考： 1、创建 src/components/index.ts 2、内容 import SvgIcon from './SvgIcon.vue' // 全部全局组件 const allGloablComponent = { SvgIcon, } export default { i
阅读全文
摘要：一、新建文件 .env.development .env.production .env.test 开发、生产、测试 二、文件内容 1、开发 # 变量必须以 VITE_ 为前缀才能暴露给外部读取 NODE_ENV = 'development' VITE_APP_TITLE = 'developme
阅读全文
摘要：一、SVG图标配置 1、安装依赖 npm install vite-plugin-svg-icons 2、在vite.config.ts中配置插件 import { fileURLToPath, URL } from 'node:url' import VueSetupExtend from 'vi
阅读全文
摘要：1、文件 vite.config.ts 2、注释
阅读全文
摘要：1、安装 npm i -g pnpm 2、创建项目 pnpm create vite
阅读全文
摘要：UI组件库用的多 一、场景 数据在子组件中，想要在父组件中操作子组件的数据或格式 数据在子组件，但是想怎么用是父组件说的算 二、语法 1、子组件 挖坑、传递数据 <!-- name 命名 gameList 传递数据 --> <slot name="content" :gameList="gameLi
阅读全文
摘要：一、情景 一个组件用多个子组件，子组件样式相同 二、作用 父组件传递数据和格式给子组件 三、语法 1、子组件(挖坑) <slot name="title">默认标题</slot> <slot name="content">默认内容</slot> 2、父组件(填坑) 用语法糖 # <Category>
阅读全文
摘要：一、优点 给后代组件传递数据，且不打扰其它组件 父组件提供provide，后代组件注入inject 二、使用 1、父组件提供数据 注意：提供ref数据，不要带.value，带了就变成普通数据，不是响应式数据 provide('name', {xx1, xx2}) <template> <Child2
阅读全文
摘要：一、父组件 对外暴露数据 defineExpose({money}) 二、子组件 1、通过事件获取父组件对外暴露的数据 $parent <button @click="changeMoney($parent)">为父赚钱</button> 2、对数据进行操作 function changeMoney
阅读全文
摘要：一、父组件 1、声明子组件ref <Child1 ref="c1"></Child1> <Child2 ref="c2"></Child2> 2、点击事件传递$refs参数 <button @click="changeData($refs)">修改所有子组件数据</button> 3、通过$refs
阅读全文
摘要：一、祖 传送数据给父组件 <Son :a="1" :b="2" :c="3"/> 二、父 转发数据给子组件 $attrs <GradeSon v-bind="$attrs" /> 三、子 接收数据 defineProps(["a", "b", "c"]) 案例 祖组件 <template> <div
阅读全文
浙公网安备 33010602011771号