最近应用Vite + Vue3 做了一个小我的项目，此文记录我的项目中遇到的一些问题，报错以及一些应用办法等。
1. 控制台正告：
[Vue warn]: Extraneous non-emits event listeners (sendMsg) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
正告起因：在应用组件传递事件时，没有在子组件接管
Vue3.x 须要在emits定义自定义事件，相似接管props
app.component('custom-form', { emits: ['inFocus', 'submit']})2. Vite中如何应用sass
npm install sass --save-dev
能够在vite.config.js中引入全局变量
export default defineConfig({ plugins: [vue()], css: { preprocessorOptions: { scss: { additionalData: `@import 'src/styles/variables.scss';` } } }})3. style scoped
应用 scoped 后，父组件的款式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件能够从布局的角度登程，调整其子组件根元素的款式
scss中批改子组件款式用/deep/和>>>都有效，应用::v-deep报正告，正确用法：
:deep(.child) { color: red;}4. Vue3.x 中的app.config.globalProperties不举荐应用，此属性能够作为Vue2.x我的项目的降级代替，但不举荐在新我的项目中应用，应应用provide/inject代替
5. vue-devtools version 6.0.0-beta.7 不显示vuex选项
解决方案：在store中增加createLogger()，而后会在控制台输入日志
https://github.com/vuejs/vue-...
import { createStore, createLogger } from 'vuex'const store = createStore({ modules: { basic }, plugins: import.meta.env.DEV ? [createLogger()] : []})6. store中的数据不响应
解决：必须应用computed，否则不响应
setup() { return { show: computed(() => store.state.basic.show) }}7. Vue3.x中监听路由变动
import { onBeforeRouteUpdate } from 'vue-router'export default { setup() { onBeforeRouteUpdate((to) => { console.log(to) }) }}8. 开发环境失常但打包之后报错
Uncaught TypeError: Cannot read property 'custom' of undefined
因为这个谬误，重启了一个新我的项目，一一装置上插件来定位谬误...起初发现这个issues：
https://github.com/vitejs/vit...
而后更新了vite版本就好了！！！
9. 某个页面热更新生效
批改此页面的时候不会自动更新，然而别的页面能够！
起因：文件名大小写导致。
页面文件名应用的是大写字母Login.vue，在vue-router中写的是小写字母，页面能拜访到然而不能更新。改过之后恢复正常。
10. 控制台正告Instance uid=0:20 not found
写我的项目的时候时不时的就报这谬误，始终没找到起因，起初发现应该是devtools的锅，敞开控制台再从新关上就不报了！
11. 引入组件时，没有增加.vue后缀，报错
Failed to fetch dynamically imported module......
加上.vue之后就好啦！
12. 动静引入图片
<template> <img :src="successImg" /></template><script> import successImg from '@assets/edit-success.png' export default { setup() { return { successImg } } }</script>13. setup中应用$emit，触发组件事件
setup接管两个参数，props和context，context是一个一般js对象（不是响应式的，能够用es6解构），context裸露组件的三个property（attrs，slots和emit）
emits: ['update:show'],setup(props, { emit }) { const close = () => { emit('update:show', false) } return { close }} 14. 应用keep-live
<router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" v-if="$route.meta.keepAlive"/> </keep-alive> <component :is="Component" v-if="!$route.meta.keepAlive"/></router-view>15. 子组件emit('success')触发父组件事件没有胜利
起因：@success写成:success了！！！！
<avatar-cut @success="getData"></avatar-cut>16. setup中监听props的值的变动
watch( () => props.award, (award, preAward) => { console.log(award) console.log(preAward) })17. vite启动我的项目报错
有一天下班，关上电脑，我的项目忽然起不来了...
vite issues https://github.com/vitejs/vit...
解决方案：手动运行node node_modules/esbuild/install.js
再启动就好了！
18. 用v-html渲染文章详情内容时，图片宽度要这样写：
.content { :deep(img) { max-width: 100%; }}在单文件组件里，scoped 的款式不会利用在 v-html 外部，因为那局部 HTML 没有被 Vue 的模板编译器解决。