vc

vue components

使用包管理器

$ npm install @ohayao/vc@latest --save
# 或
$ yarn add @ohayao/vc@latest
# 或
$ pnpm add @ohayao/vc@latest

完整引入

• 组件说明：参考docs.md
• 如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便,但你需要提前下载好相关组件的依赖。

// main.ts
import { createApp } from 'vue';
import vc from '@ohayao/vc';
import '@ohayao/vc/dist/index.css';
// 导入iconfont图标
import '@ohayao/vc/plugins/iconfont/iconfont.js';
import App from './App.vue';

const app = createApp(App);

app.use(vc);
app.mount('#app');

按需引入 ⭐️

1、您需要使用额外的插件来导入要使用的组件。

首先你需要安装unplugin-vue-components

pnpm add unplugin-vue-components -D

2、复制该解析器

const VCResolver = () => {
	return {
		type: 'component' as const,
		resolve: (name) => {
			if (name.startsWith('v')) {
				const pathName = name.slice(1).toLowerCase();
				return {
					importName: name,
					from: '@ohayao/vc',
					path: `@ohayao/vc/lib/components/${pathName}/index.js`,
					sideEffects: `@ohayao/vc/lib/components/${pathName}/${name.slice(1)}.css`
				};
			}
		}
	};
};

3、在unplugin-vue-components引用该解析器

// vite.config.ts
import Components from 'unplugin-vue-components/vite';
import { VCResolver } from 'xxxx-你存储VCResolver的文件';

export default defineConfig({
	// ...
	plugins: [
		Components({
			//...
			resolvers: [VCResolver()]
		})
	]
});

手动导入

vc 提供了基于 ES Module 的开箱即用的Tree Shaking 功能。

但你需要加载该插件vite-plugin-import，解决本地开发时的动态加载、代码如下：

export default function importPlugin() {
	const regStr = /(?<!\/\/.*|\/\*[\s\S]*?\*\/\s*)import\s*{\s*([^{}]+)\s*}\s*from\s*['"]vc['"]/g;
	return {
		name: 'vite-plugin-import',
		enforce: 'pre',
		transform: (code: string, id: string) => {
			if (id.endsWith('.vue')) {
				const str = code.replaceAll(regStr, (match, imports) => {
					const list = imports.split(',');
					const pathList: string[] = [];
					list.forEach((item: string) => {
						item = item.trim();
						const name = item.slice(1).charAt(0).toLowerCase() + item.slice(3);
						const str = `import ${item.trim()} from '@ohayao/vc/es/components/${name.trim()}';
                        import '@ohayao/vc/es/components/${name.trim()}/${item.trim().slice(1)}.css'`;
						pathList.push(str);
					});
					return pathList.join(';');
				});
				return str;
			}
			return code;
		}
	};
}

// vite.config.ts
import Components from 'unplugin-vue-components/vite';
import ViteImportPlugin from './src/utils/vite-plugin-import';

export default defineConfig({
	optimizeDeps: {
		exclude: ['@ohayao/vc']
	},
	// ...
	plugins: [ViteImportPlugin()]
});