Elliot KnightAppearance
UI 组件库
使用Vite搭建开发环境
mkdir ek-ui-vite
cd ek-ui-vite
pnpm init
1
2
3
4
2
3
4
安装vite
pnpm i vite@"3.0.7" -D
1
创建测试页面
<!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>Document</title>
</head>
<body>
<h1>Hello EK UI</h1>
<script src="./src/index.ts" type="module"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
测试 TypeScript 支持
const str: string = "Hello Vite"
console.log(str)
1
2
2
安装 Vue3 及 Vite 的 vue 插件
pnpm i vue@"3.2.37"
pnpm i @vitejs/plugin-vue@"3.0.3" -D
pnpm i @vitejs/plugin-vue-jsx@"2.0.0" -D
1
2
3
2
3
安装 UnoCSS 库。
pnpm i -D unocss@"0.45.6"
pnpm i -D @iconify-json/ic@"1.1.4"
1
2
2
文档支持
添加 VitePress 文档
pnpm i vitepress@"0.22.4" -D
1
Markdown 插槽
pnpm i vitepress-theme-demoblock@"1.4.2" -D
1
测试保障
添加测试框架
pnpm i -D vitest@"0.21.1" happy-dom@"6.0.4" @vue/test-utils@"2.0.2"
1
代码风格检查
pnpm i eslint -D
# ESLint 专门解析 TypeScript 的解析器
pnpm i @typescript-eslint/parser -D
# 内置各种解析 TypeScript rules 插件
pnpm i @typescript-eslint/eslint-plugin -D
pnpm i eslint-formatter-pretty -D
pnpm i eslint-plugin-json -D
pnpm i eslint-plugin-prettier -D
pnpm i eslint-plugin-vue -D
pnpm i @vue/eslint-config-prettier -D
pnpm i babel-eslint -D
pnpm i prettier -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
husky
# 安装
pnpm i husky -D
# 添加 husky 脚本：
npm set-script prepare "husky install"
# 添加生命周期钩子：
npx husky add .husky/pre-commit "pnpm lint"
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
修改 hooks 程序
# .husky/pre-commit
# !/bin/sh
. "$(dirname "$0")/_/husky.sh"
pnpm run lint
1
2
3
4
2
3
4
添加生命周期钩子
npx husky add .husky/pre-push "pnpm test:run"
1
添加脚本
# package.json
"scripts": {
"test:run": "vitest run",
},
1
2
3
4
5
6
2
3
4
5
6
兼容多种 JS 模块标准的软件包
模块规范
- ESM(常用)：ES 标准的模块化方案 ( ES6 标准提出 )；
- CJS(常用)：基于 CommonJS 标准的模块化；
- IFFE(常用)：使用立即执行函数实现模块化 例：(function()) {}；
- AMD：使用 Require 编写；
- CMD：使用 SeaJS 编写；
- UMD：兼容 CJS 与 AMD、IFFE 规范。
vite.config.ts 示例
const rollupOptions = {
external: ["vue"],
output: {
globals: {
vue: "Vue",
},
},
};
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8