# vue3-vite

**Repository Path**: plugin_wk/vue3-vite

## Basic Information

- **Project Name**: vue3-vite
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-21
- **Last Updated**: 2026-09-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3+vite+element-plus

## vite搭建项目

vite中文官网
Vite 需要 Node.js 版本 >= 12.0.0。

```
npm init vite@latest
vue create my-project 可选yarn/npm
```
或者
```
npm create vite@latest
```

## nvm

nodejs version management
[参考地址](https://blog.csdn.net/qq1195566313/article/details/125027972)
对node版本进行的管理工具，通过她可以安装和切换不同版本的nodejs

[配置参考](https://blog.csdn.net/m0_73391179/article/details/137641808)

* 安装nvm
[下载地址](https://github.com/coreybutler/nvm-windows/releases)
下载并安装nvm-setup.exe

* 常用命令

```
nvm list                    查看当前安装的node版本有哪些
nvm list available          查看nodejs官网所有的版本
nvm install 版本号           安装指定版本的node
nvm use 版本号               切换当前使用的node版本
```

## nrm

nrm 是一个 npm 源管理器，允许你快速地在 npm 源间切换。

```
npm i -g nrm
```

[nrm安装完后报错不是内部命令](https://www.cnblogs.com/capchem/articles/15818196.html)

```
nrm ls          查看可选源
nrm current     查看当前源
nrm -h          显示所以命令
nrm use 源      切换源
```

* 星号消失问题
npm uninstall nrm -g
npm install Pana/nrm -g

## pinia

* 安装

```
npm i pinia -S
```

## 兄弟组件传参

mitt或者tiny-emittler

npm install --save 
```js
import mitt from 'mitt'
const Mitt = mitt()
app.config.globalProperties.$bus = Mitt


const { proxy } = getCurrentInstance()
proxy.$bus.emit('方法名', '参数')
proxy.$bus.on('方法名', ('参数') => {})
```

# 安装

```javascript
// path
npm i @types/node - D
npm i @vueuse/core - S
// element-plus按需自动导入
npm i element - plus
npm i - D unplugin-vue-components unplugin-auto-import
// sass
npm i sass - S
// global.css
npm install--save normalize.css
// element-plus icons
npm install @element-plus/icons-vue
```

# scss
* 全局变量文件的导入与导出

```scss
$menuBg: #0087ff;
$menuBgHover: darken($menuBg, 20%);
// 导出
:export {
  menuBg: $menubg;
  menuBgHover: $menuBgHover;
}
// scss
@import '@/assets/style/variable.module.scss'
```

```javascript
// vue,通过module将scss模块化
import variables from '@/assets/style/variable.module.scss'
```

# reactive整个对象赋值

整个对象赋值是不起作用的，想整个对象赋值，需要在reactive中包裹一层对象

```javascript
let data = reactive({
    onlyOneChild: null
})
```

# element-plus icons自动导入
* 安装

```
npm install @element-plus/icons-vue unplugin-icons -D
```

* vite.config.ts配置

```typescript
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig(() => {
  return {
    base: '/wk/',
    plugins: [
      vue(),
      AutoImport({
        resolvers: [
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon',
          })
        ],
        // dts: path.resolve(pathSrc, 'auto-imports.d.ts')
      }),
      Components({
        resolvers: [
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep'],
          })
        ],
        // dts: path.resolve(pathSrc, 'components.d.ts')
      }),
      Icons({
        autoInstall: true
      })
    ]
  }
})
```

* 使用

```vue
<!-- 方法一 -->
<i-ep-edit></i-ep-edit>
```

# http-server部署
* 安装

```
npm i http-server -g
```

* 运行
运行需要在代码所在的文件夹外cmd运行
端口默认是8080

```
http-server -p 8080
```

# ref获取元素

通过v-for循环遍历生成的ref，再获取时，拿到的值为数组
原生html标签获取ref：proxy.$refs.xxx
自定义组件或ui框架组件获取ref：proxy.$refs.xxx.$el

# el-popover的样式修改
* 问题描述：
    添加scoped时不起作用（使用deep也无法改变），包括在el-popover中的其他元素

* 解决方法：
    在无scoped的标签中修改样式

# el-radio单选框去除label

```vue
<el-radio-group v-model="radio.casualtiesRadio">
    <el-radio :label="1">{{''}}</el-radio>
</el-radio-group>
```

# svg图标

https://igoutu.cn/icons/set/excel
https://www.svgrepo.com/（英文）

# svg-sprite-loader

project-backStage项目中

# vite-plugin-svg-icons
* main.js

```javascript
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon'
import elementIcons from '@/components/SvgIcon/svgicon'

app.use(elementIcons)
app.component('svg-icon', SvgIcon)
```

* SvgIcon/index.vue

```vue
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
</template>

<script>
export default defineComponent({
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
  },
  setup(props) {
    return {
      iconName: computed(() => `#icon-${props.iconClass}`),
      svgClass: computed(() => {
        if (props.className) {
          return `svg-icon ${props.className}`
        }
        return 'svg-icon'
      })
    }
  }
})
</script>

<style scope lang="scss">
.sub-el-icon,
.nav-icon {
  display: inline-block;
  font-size: 15px;
  margin-right: 12px;
  position: relative;
}

.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>
```

* SvgIcon/svgicon.js

```javascript
import * as components from '@element-plus/icons-vue'

export default {
    install: (app) => {
        for (const key in components) {
            const componentConfig = components[key];
            app.component(componentConfig.name, componentConfig);
        }
    },
};
```

* svg图片放在assets/icons/svg
* vite.config.js中配置createSvgIconsPlugin

# import引入的文件且只会在第一次import时执行。其他地方再次import它，就不会执行了

```js
var reader = new FileReader() //生成FileReader实例
reader.readAsArrayBuffer(file.raw)
reader.onload = function (res) { //有一个异步回调
  let yy = new Uint8Array(res.target.result) //后端需要的二进制格式
  let endd = [...yy] //后端需要的格式，我们改造成数组
  // console.log(yy)

  // let blob = window. URL.createObjectURL(new Blob([...yy]))
  // console.log(blob)
  // var files = new File([blob], res.data.filename, {
  //   type: 'application/json', 
  //   lastModified: Date.now()
  // })
  // console.log(files)
}
```

# 若依框架vue3项目，<component />组件通过路由noCache缓存问题

```vue
<component :is="Component" :key="route.path" />
```

通过路由加载组件时，<component />通过key值来标识不同的组件，key值不同会刷新组件
但是如果component内有二级甚至三级路由嵌套时，页面会整个刷新，而我们期待的是局部刷新

解决方法如下：

```vue
<router-view v-slot="{ Component, route }">
    <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews">
            <template v-if="route.meta.noCache">
                <component :is="Component" />
            </template>
            <template v-else>
                <component :is="Component" :key="route.path" />
            </template>
        </keep-alive>
    </transition>
</router-view>
```

# 图片必填校验
* prop指定一个字段
* 成功回调删除提示信息
* 删除回调把字段清空

```js
const imgUploadSuccess = (id) => {
    form.value.picture = id
    proxy.$refs['singleRef'].clearValidate('picture')
}
const deleteImageRsMap = (attachId) => {
    fileuploadRsMap.value.fileList = []
    params.value.picture = null
}
```

Dialog中多次清空表单（点击修改一次、点击关闭一次）会影响下一次打开dialog的表单图片校验

# vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）

```vue
<!-- 在router-view 中给路由添加key标识 -->
<router-view v-slot="{ Component, route }" :key="route.path">
  <transition name="fade-transform" mode="out-in">
    <keep-alive :include="cachedViews">
      <component :is="Component" :key="route.path" />
    </keep-alive>
  </transition>
</router-view>
```

# vite打包去除console、debugger信息

```ts
build: {
  minify: "terser",
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true,
    },
  },
}
```

# soft回退到add状态，hard回退到commit状态

# ctrl+点击文件路径打开文件，需要项目根目录下有jsconfig.json/tsconfig.json

# 自动导入icon

## 安装
```
npm i unplugin-icons unplugin-auto-import -D
```

## vite.config.js
```js
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

AutoImport({
  resolvers: [
    ElementPlusResolver(), 
    IconsResolver({
      prefix: 'Icon',
    })
  ],
  dts: path.resolve(patn.resolve(__dirname, './'), 'auto-imports.d.ts'),
}),
Components({
  resolvers: [
    ElementPlusResolver(),
    IconsResolver({
      enabledCollections: ['ep'],
    }),
  ],
  dts: path.resolve(patn.resolve(__dirname, './'), 'auto-imports.d.ts'),
}),
Icons({
  autoInstall: true,
})
```

## icon使用写法修改(enabledCollections)
前面添加i-ep-
```vue
<el-icon v-show="!videoIsPlay">
  <i-ep-VideoPause />
</el-icon>
<el-icon v-show="videoIsPlay">
  <i-ep-VideoPlay />
</el-icon>
```

# 打包报错解决
https://blog.csdn.net/woniuyibuyibu/article/details/145131057

* 打包报错：[vite:css] postcss-import

引入scss文件 `@import ""`
`@import url("")`是css的语法，所以报错

* [vite:build-import-analysis] Parse error @:1:1

页面不可以有import.meta.env

* WARN [plugin:vite:esbuild] This assignment will throw because "code" is a constant

定义模板字符串不可以使用const，const定义的变量不可以修改，修改为let
const code = `hello world${data}`