Vite + Vue3 项目总结（一）

最近使用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 的模板编译器处理。