创建项目
pnpm create vite lhhui
选择香草js 删除所有目录跟index.html
重新创建目录
├── packages
│ ├── components #组件
│ │ └── src
│ │ └── button
│ │ └── style
│ └── utils #工具
└── play
根目录创建pnpm-workspace.ymal
packages:
- 'packages/**'
- "play"
这个文件是workspace配置文件，配置哪些文件被视为工作区
packages/** 规则表示 packages/ 文件夹下的所有子目录中的包都被包含进来，而 "play" 规则则表示包含 play 文件夹中的包
子项目初始化
components中执行pnpm init package.json中修改名字
{
"name": "@lhhui/lhhui",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
utils一样处理 play一样处理
play
用来运行，测试组件的项目
创建main.ts index.html app.vue
main.ts
import { createApp } from "vue";
import App from "./app.vue";
import lhhui from "@lhhui/lhhui";
const app = createApp(App);
app.use(lhhui);
app.mount("#app");
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>play</title>
</head>
<body>
<div id="app"></div>
<script src="main.ts" type="module"></script>
</body>
</html>
<template>
<div>
<btn a>你好</btn>
</div>
</template>
<script lang="ts" setup></script>
play项目安装lhhui包
pnpm add @lhhui/lhhui
components中创建src/button.vue
安装vue
button.vue
<template>
<button class="ea-button" :class="buttonStyle">
<slot />
</button>
</template>
<script lang="ts" setup>
import "./style/index.scss";
import { computed } from "vue";
defineOptions({ name: "btn" });
type ButtonProps = {
a?: boolean;
};
const buttonProps = defineProps<ButtonProps>();
console.log(buttonProps,'根据props做调整')
const buttonStyle = computed(() => {
return { [`ea-button--${buttonProps.type}`]: buttonProps.type };
});
</script>
<!--
给button.vue一个name: l-button好在全局挂载的时候作为组件名使用
-->
创建index.ts
// 给传入的组件 _Button 添加了 install 方法，并将其导出为 Button，从而使得组件具有了 Vue 插件的安装方式，可以在 Vue 应用中以插件形式注册和使用。
import _Button from "./button.vue";
import type { App, Plugin } from "vue";
type SFCWithInstall<T> = T & Plugin;
const withInstall = <T>(comp: T) => {
(comp as SFCWithInstall<T>).install = (app: App) => {
const name = (comp as any).name;
//注册组件
app.component(name, comp as SFCWithInstall<T>);
};
return comp as SFCWithInstall<T>;
};
export const Button = withInstall(_Button);
export default Button;
components/src/index.ts
export * from "./button";
components/index.ts
import * as components from "./src/index";
export * from "./src/index";
import { App } from "vue";
export default {
install: (app: App) => {
for (let c in components) {
app.use(components[c]);
}
},
};
...
使用glup打包，实现按需加载
使用 Vite 库模式打包的时候,vite 会将样式文件全部打包到同一个文件中,这样的话我们每次都要全量引入所有样式文件做不到按需引入的效果。所以打包的时候我们可以不让 vite 打包样式文件,样式文件将使用 gulp 进行打包。实现按需加载样式文件。
现在很多组件库的按需引入都是借助插件来解决的,比如ElementPlus是使用unplugin-vue-components和unplugin-auto-import,这两个插件可以实现
使用 gulp
我们需要使用 ts 以及新的 es6 语法，而 gulp 是不支持的，所以我们需要安装一些依赖使得 gulp 支持这些,其中 sucras 让我们执行 gulp 可以使用最新语法并且支持 ts
pnpm i gulp @types/gulp sucrase -D -w
