mvc 网站建设长沙新增活动轨迹

mvc 网站建设,长沙新增活动轨迹,尼乐清网站建设,中山市西区网站制作一、组件的本质与使用前提在 Vue 中#xff1a;组件 可复用的 UI 行为单元使用组件的前提是#xff1a;先导入#xff08;import#xff09;#xff0c;再注册#xff08;register#xff09;#xff0c;最后使用templateMyComponent / /templat…一、组件的本质与使用前提在 Vue 中组件 可复用的 UI 行为单元使用组件的前提是先导入import再注册register最后使用template MyComponent / /template二、组件的创建基础回顾一个标准 Vue 3 组件SFC!-- components/HelloWorld.vue -- template divHello World/div /template script setup langts /script三、组件注册方式总览重点Vue 3 中常见的组件注册方式有4 种注册方式使用范围是否推荐局部注册当前组件强烈推荐全局注册整个应用谨慎使用script setup自动注册当前组件强烈推荐自动导入插件整个项目企业级推荐四、局部注册最常用、最安全1. Options API传统写法script import HelloWorld from /components/HelloWorld.vue export default { components: { HelloWorld } } /script template HelloWorld / /template特点作用域清晰不污染全局Tree Shaking 友好2. Composition API非 script setupscript import { defineComponent } from vue import HelloWorld from /components/HelloWorld.vue export default defineComponent({ components: { HelloWorld } }) /script五、script setup中的组件注册Vue 3 主流核心结论非常重要在script setup中只要 import就等于注册示例script setup langts import HelloWorld from /components/HelloWorld.vue /script template HelloWorld / /template原理说明简述script setup是编译期语法糖编译器会自动把import的组件注入到模板作用域不再需要components: {}命名规则说明import MyButton from ./MyButton.vue模板中两种写法都可以MyButton / my-button /推荐组件文件名用 PascalCase六、全局组件注册不推荐滥用1. 全局注册方式// main.ts import { createApp } from vue import App from ./App.vue import BaseButton from /components/BaseButton.vue const app createApp(App) app.component(BaseButton, BaseButton) app.mount(#app)使用BaseButton /使用场景合理基础组件Button / Icon / ModalUI 框架封装组件不依赖业务上下文的组件不推荐原因组件来源不清晰不利于 Tree Shaking大型项目中可维护性差七、组件的异步注册性能优化1. 使用defineAsyncComponentscript setup import { defineAsyncComponent } from vue const AsyncComp defineAsyncComponent(() import(/components/HeavyComponent.vue) ) /script template AsyncComp / /template适用场景页面级组件体积大的组件非首屏内容八、自动导入组件企业级方案在 Vue 3 Vite 项目中强烈推荐使用自动导入方案。1. 使用unplugin-vue-componentsnpm install -D unplugin-vue-components2. Vite 配置// vite.config.ts import Components from unplugin-vue-components/vite export default { plugins: [ Components({ dirs: [src/components], extensions: [vue], deep: true }) ] }3. 使用无需 importtemplate HelloWorld / /template优点无需手动 import支持按需加载组件使用体验接近全局组件但更安全九、组件注册常见错误与排查1. 组件未注册Failed to resolve component排查顺序是否import路径是否正确是否大小写不一致是否script setup2. 文件名大小写问题Linux 下常见import helloworld from ./HelloWorld.vue // 错误3. 使用了但未导入template HelloWorld / /template但script setup中没有 import十、最佳实践总结工程经验推荐组件使用策略场景推荐方案业务组件局部注册 / script setup页面组件异步组件基础组件全局或自动导入中大型项目自动导入 局部注册