乐趣区

关于vite:Vite-Vue3-项目总结一

jiezi

最近应用 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 的模板编译器解决。

退出移动版