耀极客论坛

 找回密码
 立即注册
查看: 424|回复: 0

Vue组件如何自动按需引入详析

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-8 01:47:12 | 显示全部楼层 |阅读模式
  刚学vue时候对于全局组件和局部组件有点懵,不知道什么时候用全局,什么时候用局部,下面这篇文章主要给大家介绍了关于Vue组件如何自动按需引入的相关资料,需要的朋友可以参考下
  在Vue中我们可以通过全局组件、局部注册的方式来使用组件

全局注册
  通过app.component来创建全局组件
  1. import { createApp } from 'vue'
  2. import HelloWorld from './components/HelloWorld'
  3. const app = createApp({})
  4. // 全局注册一个名为hello-wolrd的组件
  5. app.component('hello-wolrd', HelloWorld);
复制代码
  一旦我们全局注册了组件,我们就可以在任何地方使用这个组件:‹hello-wolrd/>
  值得注意的是全局注册会使Vue失去TypeScript的支持, Vue 3 有一个 PR 扩展了全局组件的接口。目前,Volar 已经支持这种用法,我们可以通过在根目录添加components.d.ts文件的方式来添加全对局组件的TypeScript的支持
  1. declare module 'vue' {
  2.   export interface GlobalComponents {
  3.     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
  4.   }
  5. }
复制代码
局部注册
  我们可以直接从文件中引入vue组件使用,
  在单文件组件中(SFC)
  1. ‹template>
  2.   ‹HelloWorld msg="Welcome to Your Vue.js App"/>
  3. ‹/template>
  4. ‹script>
  5. import HelloWorld from './components/HelloWorld.vue'
  6. export default {
  7.   name: 'App',
  8.   components: {
  9.     HelloWorld
  10.   }
  11. }
  12. ‹/script>
复制代码
  在JSX中
  1. import HelloWolrd from './components/HelloWorld.vue'
  2. export default {
  3.   name: "item",
  4.   render(){
  5.     return (
  6.       ‹HelloWolrd msg="Welcome to Your Vue.js App"/>
  7.     )
  8.   }
  9. }
复制代码
  局部注册的组件在其他组件中无法访问,在其父组件或子组件或中均不可用,所以你需要在每个使用该组件的地方重新引入并注册该组件
  1. import HelloWolrd from './components/HelloWorld.vue'
复制代码
  但是这种直接导入组件的方式还有一个好处,如果我们导入的组件使用了typescript,我们无需任何插件就可以在组件中获得智能提示和类型检查的功能

局部自动注册
  可以看到局部注册的优点是比较明显的,但是每次使用我们都需要重复导入,但是如果你的组件很多,你的组件注册代码看起来可能比较冗长,我们可以使用unplugin-vue-components,自动按需导入组件. 它会按需导入组件,但是不再需要导入和组件注册
  1. 该插件会自动对使用的组件生成一个components.d.ts从而获得TypeScript的支持,
复制代码
  安装插件
  vite
  1. // vite.config.ts
  2. import Components from 'unplugin-vue-components/vite'
  3. export default defineConfig({
  4.   plugins: [
  5.     Components({ /* options */ }),
  6.   ],
  7. })
复制代码
  rollup
  1. // rollup.config.js
  2. import Components from 'unplugin-vue-components/rollup'
  3. export default {
  4.   plugins: [
  5.     Components({ /* options */ }),
  6.   ],
  7. }
复制代码
  webpack
  1. // webpack.config.js
  2. module.exports = {
  3.   /* ... */
  4.   plugins: [
  5.     require('unplugin-vue-components/webpack')({ /* options */ })
  6.   ]
  7. }
复制代码
  然后我们可以像往常一样在模板中使用组件,它会自动进行下面的转换
  1. ‹template>
  2.   ‹div>
  3.     ‹HelloWorld msg="Hello Vue 3.0 + Vite" />
  4.   ‹/div>
  5. ‹/template>
  6. ‹script>
  7. export default {
  8.   name: 'App'
  9. }
  10. ‹/script>
复制代码
  转换成
  1. ‹template>
  2.   ‹div>
  3.     ‹HelloWorld msg="Hello Vue 3.0 + Vite" />
  4.   ‹/div>
  5. ‹/template>
  6. ‹script>
  7. import HelloWorld from './src/components/HelloWorld.vue'
  8. export default {
  9.   name: 'App',
  10.   components: {
  11.     HelloWorld
  12.   }
  13. }
  14. ‹/script>
复制代码
  默认它会在src/components目录下查找组件,我们可以通过dirs参数来自定义组件目录,其他配置参考github.com/antfu/unplu…

不同方案对比
                                    全局注册            局部注册            unplugin-vue-components                                    TypeScript支持            定义components.d.ts文件            默认支持            自动生成components.d.ts文件                            组件作用域            全局            局部            局部                            使用方法            全局注册后使用            局部注册后使用            添加插件后使用            
关于组件名
  定义组件名的方式有两种:
  使用 kebab-case:
  1. Vue.component('my-component-name', { /* ... */ })
  2. 当使用 kebab-case (短横线分隔命名)定义一个组件时,
  3. 你也必须在引用这个自定义元素时使用 kebab-case,例如 ‹my-component-name>。
复制代码
  使用 驼峰命名法PascalCase
  1. Vue.component('MyComponentName', { /* ... */ })
  2. 当使用 PascalCase (首字母大写命名) 定义一个组件时,
  3. 你在引用这个自定义元素时两种命名法都可以使用。
  4. 也就是说 ‹my-component-name> 和 ‹MyComponentName>都是可接受的。
  5. 注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
复制代码
  所以我们一般建议组件都采用kebab-case这种命名方式。

参考
  v3.cn.vuejs.org/guide/compo…
  v3.cn.vuejs.org/guide/types…
  github.com/antfu/unplu…

总结
  到此这篇关于Vue组件如何自动按需引入的文章就介绍到这了,更多相关Vue组件自动按需引入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 18:52 , Processed in 0.068681 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表