基于 Vite + Vue3 + TS 开发组件库
技术栈
- 附上 Github地址 和 演示地址 以供参考。
HTML5 + CSS3 + Less + ES6+ + Vue3.x + Composition-API + Vite + Gulp + Rollup + Jest
初始化项目
- 可以使用 vite 的官方 template，也可以自己搭建。
官方命令
npm init vite@latest ui --template vue
从零搭建
生成 package.json
npm init -y
{
"name": "ui",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
安装依赖
- dependencies
# 简化版本
npm i -S clipboard mockjs vue vue-router
# or 指定版本
npm i -S [email protected] [email protected] [email protected] [email protected]
- clipboard：
可选复制到剪切板 - mockjs：
可选生成随机数据 - vue：渐进式框架
- vue-router：路由管理器
- devDependencies
# 简化版本
npm i -D @rollup/plugin-node-resolve @types/jest @types/mockjs @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser @vitejs/plugin-vue @vue/compiler-sfc @vue/test-utils autoprefixer del eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-jest eslint-plugin-prettier eslint-plugin-vue gulp gulp-autoprefixer gulp-cssmin gulp-less gulp-postcss jest less markdown-it-container postcss-pxtorem prettier rollup rollup-plugin-terser rollup-plugin-typescript2 rollup-plugin-vue ts-jest typescript vite vite-plugin-vuedoc vue-jest vue-tsc
# or 指定版本
npm i -D @rollup/[email protected] @types/[email protected] @types/[email protected] @types/[email protected] @typescript-eslint/[email protected] @typescript-eslint/[email protected] @vitejs/[email protected] @vue/[email protected] @vue/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
- @rollup/plugin-node-resolve：rollup 路径解析插件，告诉 Rollup 如何查找外部模块
- @types/jest：jest 的 TS 模块
- @types/mockjs：mockjs 的 TS 模块
- @types/node：关于 nodejs 的类型定义，用于 nodejs 中使用 TS
- @typescript-eslint/eslint-plugin：eslint 插件，包含了各类定义好的检测 TS 代码的规范
- @typescript-eslint/parser：eslint 的解析器，用于解析 TS，从而检查和规范 TS
- @vitejs/plugin-vue：vite 解析 Vue 的插件
- @vue/compiler-sfc：解析 SFC(Single File Components) 组件
- @vue/test-utils：Vue 单元测试
- autoprefixer：浏览器前缀工具
- del：用于删除文件夹和文件
- eslint：JS 代码检测工具
- eslint-config-airbnb-base：eslint 的 airbnb 编码规则
- eslint-config-prettier：处理 eslint 中的样式规范和 prettier 中样式规范的冲突
- eslint-plugin-import：验证正确的导入的 eslint 插件
- eslint-plugin-jest：解析 jest 的 eslint 插件
- eslint-plugin-prettier：将 prettier 作为 eslint 规范来使用
- eslint-plugin-vue：解析 Vue 的 eslint 插件
- gulp：自动化构建工具
- gulp-autoprefixer：自动获取浏览器厂商前缀，如 -webkit-
- gulp-cssmin：css 压缩
- gulp-less：解析 CSS 预编译器 LESS
- gulp-postcss：转换前缀工具，和 gulp-autoprefixer 搭配使用
- jest：单元测试
- less：CSS 预编译器
- markdown-it-container：Markdown 解析器
- postcss-pxtorem：
可选转换 rem 单位 - prettier：格式化规范
- rollup：自动化打包工具
- rollup-plugin-terser：rollup 压缩
- rollup-plugin-typescript2：rollup 解析 TS
- rollup-plugin-vue：rollup 解析 Vue
- ts-jest：单元测试解析 TS
- typescript：JS 类型的超集，强类型
- vite：自动化构建工具
- vite-plugin-vuedoc：Vite 解析 Markdown
- vue-jest：单元测试解析 Vue
- vue-tsc：Vue 文件生成
.d.ts类型文件
创建项目目录
创建演示项目目录
- 生成
tsconfig.json
# 全局安装
npm i -g typescript
# 初始化
tsc --init
- 根目录创建 index.html
UI组件库
- 创建 examples 目录，此目录为演示文档主目录，相当于 src
- 创建
examples/assets：资源目录 - 创建
examples/components：演示项目的公共组件 - 创建
examples/router：路由 - 创建
examples/App.vue：页面入口 - 创建
examples/main.ts：主入口
- 创建
import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";
const app = createApp(App);
app.use(router);
app.mount("#app");
- 配置 Vite
- 创建
vite.config.ts
- 创建
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()]
});
- 配置 Eslint
- 创建
.eslintrc.js
- 创建
// 配置信息
const config = {
env: {
browser: true,
es2021: true,
node: true
},
extends: ["plugin:vue/essential", "airbnb-base", "plugin:prettier/recommended", "plugin:jest/recommended"],
parserOptions: {
ecmaVersion: 12,
parser: "@typescript-eslint/parser",
sourceType: "module"
},
plugins: ["vue", "@typescript-eslint"],
settings: {},
rules: {
}
};
module.exports = config;
- TS 识别 Vue 文件
- 创建
typings/shims-vue.d.ts
- 创建
// vue
declare module "*.vue" {
import { App, defineComponent } from "vue";
const component: ReturnType & {
install(app: App): void;
};
export default component;
}
创建单元测试主目录
- 配置 Jest
- 创建
jest.config.js
- 创建
// 配置
const config = {
moduleFileExtensions: ["vue", "json", "js", "ts"],
preset: "ts-jest",
testEnvironment: "jsdom",
transform: {
"^.+\\.vue$": "vue-jest", // vue 文件用 vue-jest 转换
"^.+\\.ts$": "ts-jest" // ts 文件用 ts-jest 转换
},
testMatch: ["**/tests/unit/*.spec.ts"], // 匹配 tests/unit 目录下的 .ts 文件
verbose: true, // 显示冗余代码，true：显示测试用例，false：显示 console.log
bail: true, // 经历几次失败后停止运行测试
};
module.exports = config;
- 创建测试用例
tests/unit/img.spec.ts
import { mount } from "@vue/test-utils";
import MeImg from "~/MeImg/index.vue"; // 引入主要测试的组件
describe("MeImg", () => {
const src = "http://dummyimage.com/100x100/0079cb/fff"; // 图片地址
// 测试传参 src
test("props src", () => {
// 向组件里传参，获取组件实例
const wrapper = mount(MeImg, {
props: { src }
});
const viewer = wrapper.find(".me-img"); // 获取 DOM
expect(viewer.exists()).toBeTruthy(); // 是否存在
const imgEl = viewer.find("img");
expect(viewer.exists()).toBeTruthy();
expect(imgEl.attributes("src")).toBe(src); // 传入的 src 地址是否在组件里正确
});
});
创建组件库主目录
- 创建
packages/index.ts
import type { App } from "vue";
/* 基础组件 start */
import MeImg from "./MeImg"; // 图片
/* 基础组件 end */
// 所有组件
const components: any[] = [MeImg];
/**
* 组件注册
* @param {App} app Vue 对象
* @returns {Void}
*/
const install = (app: App) => {
// 注册组件
components.forEach(component => app.component(component.name, component));
};
export { MeImg };
// 全部导出
export default {
install,
...components
};
开发组件
- 创建组件文件
packages/MeImg/index.vue
![]()
- 创建导出文件
packages/MeImg/index.ts
import type { App } from "vue";
import MeImg from "./index.vue";
type SFCWithInstall = T & { install(app: App): void }; // vue 安装
// 安装
MeImg.install = (app: App) => {
app.component(MeImg.name, MeImg);
};
const InMeImg: SFCWithInstall = MeImg; // 增加类型
export default InMeImg;
- 样式开发
theme-default/MeImg.less
/**
* @file 图片
*/
.me-img {
.inline-block;
// 相同的样式
.same-style {
display: block;
width: @img-size;
overflow: hidden;
}
img {
.same-style;
height: auto;
}
span {
.same-style;
height: 40px;
}
}
::: tip 完成
开发完成
:::
打包演示项目
package.json设置命令
"scripts": {
"start": "npm run dev",
"dev": "vite -m development",
"build": "npm run build:theme && npm run build:package && npm run build:package:dts",
"build:docs": "vite build",
"build:theme": "gulp build -f build/gulpfile.prod.js",
"build:package": "rollup -c build/rollup.config.js",
"build:package:dts": "rollup -c build/rollup.config.dts.js",
"test:unit": "jest -c=jest.config.js --detectOpenHandles"
}
配置组件库打包
组件 JS 打包
- 创建 Rollup 配置文件
build/rollup.config.js和build/rollup.config.dts.js
import nodeResolve from "@rollup/plugin-node-resolve"; // 告诉 Rollup 如何查找外部模块
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue"; // 处理vue文件
import { readdirSync } from "fs"; // 写文件
import { resolve } from "path";
const input = resolve(__dirname, "../packages"); // 入口文件
const output = resolve(__dirname, "../lib"); // 输出文件
const config = readdirSync(input)
.filter(name => !["theme-default", "index.ts", "types.ts"].includes(name))
.map(name => ({
input: `${input}/${name}/index.ts`,
external: ["vue"],
plugins: [
nodeResolve(),
vue(),
typescript({
tsconfigOverride: {
compilerOptions: {
declaration: false
},
exclude: ["node_modules", "examples", "tests"]
},
abortOnError: false,
clean: true
})
],
output: {
name: "index",
file: `${output}/${name}/index.js`,
format: "es"
}
}));
config.push({
input: `${input}/index.ts`,
external: ["vue"],
plugins: [
nodeResolve(),
vue(),
typescript({
tsconfigOverride: {
compilerOptions: {
declaration: false
},
exclude: ["node_modules", "examples", "tests"]
},
abortOnError: false,
clean: true
})
],
output: {
name: "index",
file: `${output}/index.js`,
format: "es"
}
});
export default config;
import nodeResolve from "@rollup/plugin-node-resolve"; // 告诉 Rollup 如何查找外部模块
import { terser } from "rollup-plugin-terser";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue"; // 处理vue文件
import { resolve } from "path";
const input = resolve(__dirname, "../packages"); // 入口文件
const output = resolve(__dirname, "../lib"); // 输出文件
const config = [
{
input: `${input}/index.ts`,
output: {
format: "es",
file: `${output}/index.esm.js`
},
plugins: [
terser(),
nodeResolve(),
vue({
target: "browser",
css: false,
exposeFilename: false
}),
typescript({
useTsconfigDeclarationDir: false,
tsconfigOverride: {
include: ["packages/**/*"],
exclude: ["node_modules", "examples", "tests"]
},
abortOnError: false
})
],
external: ["vue"]
}
];
export default config;
组件样式打包
- 创建 Gulp 配置文件
build/gulpfile.base.js
const { src, dest, series, parallel } = require("gulp");
const less = require("gulp-less");
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require("gulp-cssmin");
const del = require("del");
// 打包配置
const config = {
input: "../packages/theme-default/",
output: "../lib/theme-default"
};
// 导出配置项
exports.config = config;
// 复制字体
exports.copyfont = () => src([`${config.input}fonts/*`, `!${config.input}fonts/*.css`]).pipe(dest(`${config.output}/fonts`));
// 压缩font 里的 CSS
exports.minifontCss = () =>
src(`${config.input}fonts/*.css`)
.pipe(cssmin())
.pipe(dest(`${config.output}/fonts`));
// 删除之前css打包文件
exports.clean = done => {
del(
["*.css", "fonts"].map(name => `${config.output}/${name}`),
{ force: true }
);
done();
};
// 编译 LESS
const compile = () =>
src([`${input}*.less`, ...["base", "variable"].map(name => `!${input}${name}.less`)])
.pipe(less())
.pipe(
autoprefixer({
overrideBrowserslist: ["last 2 versions"]
})
)
.pipe(cssmin())
.pipe(dest(output));
exports.build = series(clean, parallel(compile, copyfont, minifontCss));
上传 npm 官网
- 登录
npm login
- 发布
npm publish
- 最后再附上 Github地址 和 演示地址 以供参考。