vue3项目开发过程中遇到的问题
AprilTong 6/11/2023 Vue
# el-popover 中的内容是动态的，需要及时更新位置
<el-popover ref="popoverRef">
XXX
</el-popover>
1
2
3
2
3
const popoverRef = ref()
// 更新弹出框
popoverRef.value.popperRef.popperInstanceRef.update()
1
2
3
2
3
# echarts5 使用 报错 Cannot read properties of undefined (reading 'type')
vue 文档说明：
- 有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。
- 当渲染具有不可变数据源的大列表时，跳过 proxy 转换可以提高性能
import { markRaw } from 'vue'
const chartInstance: any = ref(null)
chartInstance.value = markRaw(echarts.init(document.getElementById(eleId)))
1
2
3
2
3
# unplugin 插件 自动导入不生效
- eslint 提示报错 ref、watch is not defined，在 eslint 规则配置文件中，引入自动导入生成的文件
在.eslintrc.js 文件中修改
extends: ['./.eslintrc-auto-import.json']
1
- ts 提示报错找不到名称“ElMessage”
在 tsconfig.json 文件中，include 中添加生成的文件
"include": ["src/presets/types/auto-imports.d.ts'", "src/presets/types/components.d.ts"]
1
# huksy 不执行
警告提示：
hint: The '.husky/commit-msg' hook was ignored because it's not set as executable.
hint: You can disable this warning with git config advice.ignoredHook false.
原因: 钩子文件没有运行权限
分别执行以下命令
chmod +x .husky/pre-commit
chmod +x .husky/commit-msg
1
2
3
2
3
# 解决‘defineProps‘ is not defined 报错
使用 vue 的 setup 语法糖，eslint 提示'defineProps'没有定义, defineProps 属于 Vue3 的规则校验,在.eslintrc.js 文件进行配置
module.exports = {
env: {
'vue/setup-compiler-macros': true,
},
}
1
2
3
4
5
2
3
4
5
# 使用 echarts 自定义主题
在echarts 官网 (opens new window)下载对应主题放到对应目录，我选择了 js 版本。
- 在 main.js 中引入
import * as echarts from 'echarts'
// echarts主题引入会提示无法找到模块“./assets/theme/macarons.js”的声明文件，以及该js文件拥有any类型。
// 暂时关闭ts校验
// @ts-expect-error
import('./assets/theme/macarons.js')
// @ts-expect-error
import('./assets/theme/custom.js')
// @ts-expect-error
import('./assets/theme/purple-passion.js')
// @ts-expect-error
import('./assets/theme/shine.js')
// @ts-expect-error
import('./assets/theme/walden.js')
// @ts-expect-error
import('./assets/theme/westeros.js')
// @ts-expect-error
import('./assets/theme/wonderland.js')
window.echarts = echarts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- 修改对应的 js 文件，两处。 修改前
;(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
})(this, function(exports, echarts) {
// 具体配置
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
修改后
- 使用对应主题
// 第二个参数是对应主题的名字，比如
echarts.init(ele, 'macarons')
1
2
2