不再需要导入 Vue 组件 [Storybook 兼容]

介绍

在Unique Vision Co., Ltd.

Vue.js + Vite
故事书+Vite

我正在一个简单的环境中开发前端。
在发展的同时手动导入组件的繁琐任务会发生很多次。
既然麻烦，就想办法避免导入。

卸载 vue 组件

这是一个著名的插件。
按文档安装

npm i unplugin-vue-components -D

vite.config.ts

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
     Components({ /* options */ }),
  ],
})

已经完成。

有了这个

应用程序.vue

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

但

应用程序.vue

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

您将能够编写：

加载类型

但以这个速度类型在 VSCode 上不起作用它成为了
所以，作为dts: true

vite.config.ts

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
     Components({
       dts: true,
     })
  ],
})

npm run serve

然后
Vue の Component はもう import しなくていい【Storybook 対応】

生成components.d.ts。将此包含在您的 tsconfig.json 中的 include 中。

tsconfig.json

{
  "include": [
    "components.d.ts"
  ]
}

现在它将为您加载类型！
之后在做npm run serve的时候，好像在创建组件的时候会自动添加到类型定义components.d.ts中。
将此文件包含在 .gitignore 中看起来不错。

使其可用于 Storybook

以这个速度，在故事书中没有显示任何内容，因为“未导入的组件未导入”。

因此，设置如下。

.storybook/main.js

+const Components = require('unplugin-vue-components/vite');

module.exports = {
  stories: ['../src/**/*.stories.ts'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-links',
  ],
  framework: '@storybook/vue3',
  core: {
    builder: '@storybook/builder-vite',
  },
+  async viteFinal(config) {
+    config.plugins.push(Components({
+      dts: true,
+      dirs: [
+        'src/components'
+      ],
+    }))
+
+    return config;
+  },
};

从 Storybook 设置 unplugin-vue-components 时，似乎有必要如上所述澄清组件目录。而且应指定 src 而不是 ../src我没有意识到这一点，我对此非常上瘾。

现在 Vue.js 和 Storybook 不再需要导入组件了！

在应用程序本身和 Storybook 之间共享配置文件

您可以通过简单地从外部提取 unplugin-vue-components 的设置来共享文件。

unplugin.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const Components = require('unplugin-vue-components/vite');

module.exports = Components({
  dts: true,
});

vite.config.ts

import Components from './unplugin.config.js'

export default defineConfig({
  plugins: [
-     Components({
-       dts: true,
-     })
+     Components
  ],
})

.storybook/main.js

-const Components = require('unplugin-vue-components/vite');
+const Components = require('../unplugin.config');

module.exports = {
  stories: ['../src/**/*.stories.ts'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-links',
  ],
  framework: '@storybook/vue3',
  core: {
    builder: '@storybook/builder-vite',
  },
  async viteFinal(config) {
-    config.plugins.push(Components({
-      dts: true,
-      dirs: [
-        'src/components'
-      ],
-    }))
+    config.plugins.push(Components)

    return config;
  },
};

参考

综上所述

我们谈论我们公司的发展和前端的事情。不介意的请关注我。

我是一家名为 Unique Vision 的公司的工程师。
我们正在致力于前端开发和质量改进，所以如果您对此感兴趣，请关注我们。

成为持续提供优质服务的公司/品质提升团队https://t.co/vI7YsKL6QW
— 白石@Unique Vision (@punksy2)2022 年 10 月 3 日

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308631124.html