从零搭建一个组件库 -- 编写组件

组件环境

• 在 packages 下新建 components 并初始化 package.json
• 项目根目录安装 vue 和 vite 依赖，安装 vite 依赖会有 define/* 提示。

pnpm add vue vite unplugin-vue-define-options -D -w

• unplugin-vue-define-options 可以在编写组件的时候 通过 defineOptions 方法为组件设置 name

defineOptions({
  name: 'PlayButton'
})

• 修改 tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es2016",
    "sourceMap": false,
    "module": "esnext",
    "esModuleInterop": true,
    "strict": true,
    "jsx": "preserve",
    "lib": ["esnext", "dom"],
    "types": ["node", "unplugin-vue-define-options"],
    "rootDir": ".",
    "moduleResolution": "node",
    "paths": {
      "@valgle/*": ["packages/*"]
    }
  }
}

• eslint 添加支持 vue 插件 eslint-plugin-vue

pnpm add eslint-plugin-vue -D -w

• 修改 .eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended', // add
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  plugins: ['@typescript-eslint', 'prettier', 'vue'] // add
}

Button 组件

• 在 packages/components 目录下创建 button 目录，结构如下

注意：我们这里只编写一个简单的 button 组件，主要是打通整体流程

|-- button
    |-- index.ts
    |-- src
    |   |-- button.ts
    |   |-- button.vue
    |   |-- button.less
    |-- __test__

// components/button/src/button.vue
<template>
  <button><slot></slot></button>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'VangleButton'
})
</script>

// components/button/index.ts
export * from './src/button'
import type { App } from 'vue'
import Button from './src/button.vue'

Button.install = (app: App) => {
  app.component(Button.name!, Button)
}

export { Button }
export default Button

// components/index.ts
export * from './button'

使用组件

• 在根目录 package.json 中添加 组件的依赖

{
  "devDependencies": {
    "@Wannaer/components": "workspace:*"
  }
}

这里的包名 @Wannaer/components，就是我们在 pzckages/components/package.json 中设置的 name 属性

• 执行 pnpm install

play 一下

• 我们可以在根目录创建使用 vite 创建一个项目，请参考 vite 官网，项目名称就叫 play

# 构建一个 Vite
pnpm create vite
# 构建一个 Vite + Vue 项目
pnpm create vite play --template vue

• 创建完后修改 pnpm-workspace.yaml

packages:
  - 'packages/*'
  - 'play' # add

• 添加启动命令 package.json

{
  "scripts": {
    "play": "pnpm dev --filter ./play", // add
    "prettier": "prettier --write .",
    "lint": "eslint --ext .ts packages/*/**.ts",
    "lint:fix": "eslint --ext .ts packages/*/**.ts --fix"
  }
}

• 最后在 play 项目中使用我们编写的组件即可

注意事项

由于我们处于开发环境，需要给 vite.config.ts 添加 unplugin-vue-define-options/vite 插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import DefineOptions from 'unplugin-vue-define-options/vite'

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