vite-engineering-demo v1.0.0

ping github.com

添加映射:C:\windows\system32\drivers\etc\hosts

20.205.243.166 github.com

git config --global http.sslVerify "false"

升级 pnpm

pnpm add -g @pnpm/exe

初始化

pnpm init [-y]  // node v16.16.0

安装 Vite， 搭建组件库的调试环境

pnpm i vite -d   // or -D ?  => -D

启动

npx vite

  "scripts": {
    "dev": "vite"
  },

pnpm dev

安装 vue3.0

pnpm i vue -d

提供 Vue 3 单文件组件支持，安装 Vite 的 Vue 插件

pnpm i @vitejs/plugin-vue  -D

添加一个 vite.config.ts

编写一个 SFC 单文件组件测试

添加一个模块的类型定义, 来解决 Typescript 默认不支持 .vue 类型的模块

添加一个模块的类型定义 src/env.d.ts

2.JSX 组件

转译工具

pnpm i @vitejs/plugin-vue-jsx@"2.0.0" -D

    // 添加JSX插件
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })

新建一个 JSX 组件测试 (使用 TS 语言所以是 TSX)

在 tsconfig 中配置一下 jsx 语法支持

3.库文件封装

引入 UnoCSS

pnpm i -d unocss@0.45.6
pnpm i -D @iconify-json/ic // unocss@"0.45.6" @iconify-json/ic@"1.1.4"

在 Vite 中添加 UnoCSS 插件 在组件中引入 UnoCSS，测试

定制安全列表(定义在 UnoCSS 插件的配置中)

config/unocss.ts

const safelist = [
  ...colors.map((v) => `bg-${v}-500`),
  ...colors.map((v) => `hover:bg-${v}-700`),
];

export default () =>
  Unocss({
    safelist,
    presets: [presetUno(), presetAttributify(), presetIcons()],
  });

添加 VitePress 文档

pnpm i vitepress -D // @"0.22.4"

docs/vite.config.ts