工程简介

  • 🔧 基于Vite与Vue搭建
  • ⚛️ 使用原子化 CSS 引擎编写样式
  • 🌟 采用Vitepress构建文档库,采用Vercel进行部署
  • ⚙️ 通过Vitest进行组件测试
  • 🎛 支持 JSX 与 SFC 组件
  • 📦 基于 ACTION CI 实现持续集成与交付

项目搭建

首先创建工程目录,初始化工程仓库

1
mkdir simple-ui && cd simple-ui
1
pnpm init -y

安装vite

1
pnpm install vite -D

在工程目录中新建一个 html 文件,测试是否能够运行

1
2
3
4
5
6
7
8
9
10
11
12
<!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>🛠 Simple UI</title>
  </head>
  <body>
    <h1>Hello, Simple UI.</h1>
  </body>
</html>

在终端启动项目:

1
pnpm vite

根据终端输出的 URL 信息,在浏览器中打开地址,发现内容能够出来,说明项目启动成功

安装配套工具

1
2
pnpm install @vitejs/plugin-vue -D # 支持模版语法
pnpm install @vitejs/plugin-vue-jsx -D # 支持JSX语法

创建vite.config.ts文件进行配置:

1
2
3
4
5
6
7
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()],
})

TS 配置

由于使用 ts 开发,还需要配置一下vue类型文件及tsconfig.json

  • shims-vue.d.ts
1
2
3
4
5
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
  • tsconfig.json
1
2
3
4
5
6
7
8
9
10
11
{
  "compilerOptions": {
    "declaration": true /* 生成相关的 '.d.ts' 文件。 */,
    "declarationDir": "./dist/types" /* '.d.ts' 文件输出目录 */,
    "jsx": "preserve"
  },
  "include": ["./**/*.*", "./shims-vue.d.ts"],
  "exclude": ["node_modules"],
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": "true"
}