【开发一个Vue3组件】 | 如何创建一个本地库项目

开发过程中需要开发一个内部的组件库来实现某些业务功能，遵循Vue3的开发习惯，我这里再当前项目创建packages包专门用来存放本地的组件库文件，本文主要是记录下整个组件库环境的搭建过程。

搭建要求

在组件库整体搭建之前，我需要明确几个组件库需要支持的功能或者说是特性，然后安装需求来一一填补搭建。具体需求如下：

• Vue3：这是最基础的，项目组件是基于Vue3项目之下。
• TypeScript：选用typescript作为开发语言是为了开发应用中便于查阅配置熟悉已经调用关系。
• Vite: vue3配套构建工具。
• pnpm: 这个是和项目同步了。
• unocss：原子样式，便于组件样式的快速修正。
• UI库：UI库这里自行选择，不做赘述。

初始化项目

接下来，让我们一步步按顺序来创建一个基础的组件库，首先我们需要通过pnpm来初始化一下工程，如pnpm为安装的需要提前安装下：

$ npm install -g pnpm  # 若未安装请提前安装，若已安装请忽略
$ pnpm config set registry https://registry.npmmirror.com/ # 修改为淘宝镜像
$ pnpm init # 初始化项目

D:\Projects\CareeLink\packages\flowable>pnpm init
Wrote to D:\Projects\CareeLink\packages\flowable\package.json

{
  "name": "flowable",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

项目初始化成功后，会创建如上内容的一个package.json文件。

依赖安装

项目初始化完成后，我们需要安装必要的依赖来保证项目的完整性。

1、安装基础依赖

$ pnpm install vue@latest typescript sass @vue/tsconfig @tsconfig/node18 -D

2、安装unocss

添加unocss库来实现样式绘制，安装命令如下：

$ pnpm install  unocss -D

3、安装vite及其相关构建插件

$ pnpm install vite@latest @vitejs/plugin-vue-jsx @vitejs/plugin-vue -D

创建配置文件

1、创建tsconfig.json、tsconfig.app.json、tsconfig.node.json

// tsconfig.app.json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*","src/**/examples/*","src/App.vue","src/main.ts"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
    }
  }
}

// tsconfig.node.json

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}


// tsconfig.json
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

2、创建unocss.config.ts

// unocss.config.ts
import { defineConfig, presetUno, transformerVariantGroup } from 'unocss'

export default defineConfig({
  presets: [presetUno()],
  transformers: [transformerVariantGroup()],
})

3、创建vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// 引入Unocss
import Unocss from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    Unocss()
  ]
})

4、创建main.ts并导入unocss

import 'unocss'

export * from './components'

5、创建一个测试组件

创建一个components目录，components目录下创建一个index.ts文件，一个button.tsx文件

// index.ts
import Button from './button.tsx'

export { Button }

// button.tsx

import  { defineComponent } from 'vue'


const Button  = defineComponent((props: any, context: any) => {
  return (<div>
   <Button> 测试组件</Button>
  </div>)
})

Button.install = (app: unknown) => {
  app.use(Button)
}
export default Button