Zon.Zhou

集成npm包中二次封装的element-ui最近因工作需要而制定一些规范以及封装组件库和基础框架搭建，在项目中我负责规范制定和基础框架搭建，element-ui组件二次封装使用npm包方式集成，但组件仍在开发阶段，故导出的均是源码方式。 在安装ui插件时，内部已经集成了element-ui库，故不需要再重新安装element-ui，因要重写ui主题样式和重新element-ui的css样式，故仍需引入npm包内部的样式文件。 123//main.tsimport 'xxx/xxx.css' 但由于内部引入element-ui样式scss的源文件，并且使用@forward 进行了主题颜色的修改。 在引入此样式文件时，基础框架上还使用了scss全局样式文件，此时导致了@forward rules must be written before any other rules的错误。 此时可修改导入方式进行解决： 12345678910//vite.config.ts 配置//使用`@use 'xxx.css' as *`css: { ...

头部面包屑改成多页签跟着vue3.x + ts + vue-router + pinia简易多页签方案实现一个头部面包屑改成多页签路由缓存功能。 由于菜单存在一级菜单和二级菜单，使用缓存时一定要给动态组件一个key值，否则路由均嵌套在一个页面内。 此时还有另外一个问题，在keep-alive外层过渡动画transition，此时的动画对于二级菜单是无效的，并且过度动画里需要对元素有一个创建和销毁的过程动画才能生效。 而且keep-alive内部只能缓存第一级根元素，如果用transition包裹动态组件，缓存动态路由组件就会失效了。 故此时不使用过度动画了，但缓存好了，如何关闭呢？如何清除缓存呢。此时可能想到keep-alive的include 但项目写好的页面已经存在很多使用setup语法糖script标签未命名的页面，不可能将所有页面重构成非setup语法糖的写法。 我在vue3的issue里找到加script标签的解决方案，但是还是不想给每个页面添加也个新的名称。 故给缓存的动态组件绑定路由的完整路径fullName，并且这个key末尾再加一个随机数，这样路由标签就可以关闭了。 ...

Vite设置代理配置123456789101112131415server: { host: true, port: Number(env.VITE_PORT), open: true, proxy: { '/api': { target: 'http://123.234.345.11:9999', changeOrigin: true // rewrite: (path) => { // path.replace('/api', ''); // } } }, cors: true }, 官方 为开发服务器配置自定义代理规则。 期望接收一个 { key: options } 对象，如果 key 值以 ^ 开头，将会被解释为 RegExp ...

项目搭建的过程项目初始化 创建 1yarn create vite 安装依赖 12cd my-vite-demoyarn 运行 1yarn dev 构建生产环境和预览环境 修改配置文件vite.config.ts 根据模式对环境做相关配置 12345export default defineConfig(({ mode }) => { return { plugins: [vue()], };}); 新增环境文件.env 一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env） 已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖 .env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效 添加Typescript提示 src目录下的 env.d.ts 文件 12345678910/// <reference types="vi ...

VueRequest安装123npm install vue-request# oryarn add vue-request 用例12345678910111213141516171819202122<template> <div> <div v-if="loading">loading...</div> <div v-if="error">failed to fetch</div> <div v-if="data">Hey! {{ data }}</div> </div></template><script lang="ts">import { defineComponent } from 'vue';export default defineComponent(
...

字符串”false”转换为布尔值false问题 在项目中遇到字符串“false”写在if(‘false’)中仍为true问题 12345678910111213141516var myBoolean=new Boolean(); //下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。var myBoolean=new Boolean();var myBoolean=new Boolean(0);var myBoolean=new Boolean(null);var myBoolean=new Boolean("");var myBoolean=new Boolean(false);//不带单引号的是falsevar myBoolean=new Boolean(NaN);//下面的所有的代码行均会创初始值为 true 的 Boolean 对象：var myBoolean=new Boolean(1);var myBoolean=new Boolean(true);var myBoolean=new Boolean("true&quo ...

moment.js中文国际化无效安装 官网：moment.js 12npm install moment --save # npmyarn add moment # Yarn 引入1234//main.tsimport moment from "moment";import "moment/locale/zh-cn";moment.locale('zh-cn') 无效 使用12const nowTime = moment().format('YYYY-MM-DD HH:mm:ss dddd');//2022-05-19 11:47:36 Thursday 解决12import moment from "moment";import 'moment/dist/locale/zh-cn' 12moment.locales();//["en", "zh-cn"]moment().for ...

文件导入 在 Vite 中静态资源都有两种构建方式，一种是打包成一个单文件，另一种是 base64 编码格式的文件。 Vite 中内置的优化方案:静态资源体积 >= 4KB，则提取成单独的文件；静态资源体积 < 4KB，则作为 base64 格式的字符串内联； svg 格式的文件会打包成单独的文件 new URL(url, import.meta.url): URL接口用于解析、构造、规范化和编码URL(.href)一个字符串化器，它返回一个包含整个 URL 的字符串 这在现代浏览器中能够原生使用。实际上，Vite 并不需要在开发阶段处理这些代码 批量导入Glob 导入: Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块 1const modules = import.meta.glob('./dir/*.js') 12345// vite 生成的代码const modules = { './dir/foo.js': () => import(& ...

生成 svg 雪碧图 安装 node version: >=12.0.0 vite version: >=2.0.0 12345yarn add vite-plugin-svg-icons -D# ornpm i vite-plugin-svg-icons -D# orpnpm install vite-plugin-svg-icons -D 配置 vite.config.ts 中的配置插件 1234567891011121314151617181920import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'import path from 'path'export default () => { return { plugins: [ createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [pa ...

路径的别名 resolve.alias 在构建vue项目时通常给路劲配置别名 12345678export default defineConfig({ resolve: { alias: { // '@': path.resolve(__dirname, "src"), //path.resolve 不能使用 } }}) 无效 官方：类型：Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement, customResolver } ...