vue3组件库开发之项目初始化

项目地址：

https://gitee.com/nifeng6/vue-ui-template

使用vite创建vue-ts项目

执行命令创建你的项目

pnpm create vite nf-ui --template vue-ts

创建后，进入项目目录执行pnpm i 安装模块
接着修改vite.config.ts内容，添加以下代码

  server: {
    host: "localhost",
    port: 3000,
    open: true,
  },

创建packages文件

这里遵循 Monorepo 模式，先提前将可能用到的内容模块化a
PS：目前先不创建以下文件夹，稍后会使用lerna创建

创建你的工作空间

根目录下创建 pnpm-workspace.yaml 文件，插入以下代码

packages:
  - 'packages/**'
  - 'src/**'

安装&使用eslint + prettier

执行以下代码安装依赖

pnpm add -w eslint prettier eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier -D

接着，在package.json文件中的添加以下执行脚本

scripts: {
	"lint:create": "eslint --init"
}

执行脚本，步骤如下

因为我们使用了工作空间，执行上方的一键脚本可能有些问题，可以在执行以下命令安装脚本
（PS: 如果你在这一步没有报错，或者你没有使用工作空间，可以跳过以下的这一段代码）

pnpm add -w eslint-plugin-vue@latest  @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D

安装一部分ts、起别名等可能缺少的依赖

pnpm install eslint-import-resolver-alias @types/eslint @types/node -D

修改目录下的 .eslintrc.cjs 文件

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  plugins: ['vue', '@typescript-eslint'],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 13,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      tsx: true,
    },
  },
  settings: {
    'import/resolver': {},
  },
  extends: [
    'airbnb-base',
    'eslint:recommended',
    'plugin:vue/vue3-strongly-recommended',
    // 解决 prettier 冲突
    'prettier',
  ],
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
  rules: {
    // 禁止使用多余的包
    'import/no-extraneous-dependencies': 0,
    'no-param-reassign': 0,
  },

}

在package.json中添加以下脚本

scripts: {
	"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0 --cache",
	"lint:fix": "pnpm run lint --fix",
	"format": "prettier --write --cache ."
}

执行，pnpm run lint:fix 可知自己的报错并修复代码

安装 lint-staged&husky

执行以下代码

pnpm add -w lint-staged husky -D

package.json添加以下脚本

scripts: {
	"prepare": "husky install",
}

初始化git： git init
接着执行上方脚本，初始化husky

在.husky文件夹中，新建pre-commit文件，写入以下代码：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged --allow-empty

package.json根节点中添加以下内容

  "lint-staged": {
    "*.{js,ts,tsx,vue,json}": [
      "prettier --write"
    ],
    "*.{js,ts,tsx,vue}": [
      "eslint --fix"
    ]
  },

安装commitlint

pnpm add -w @commitlint/config-conventional @commitlint/cli -D

根目录下创建 commitlint.config.cjs 文件

/*
"off"或者0:关闭规则 "warn"或1:开启规则抛出警告 "error"或2:开启规则抛出错误
*/
module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
      'body-leading-blank': [2, 'always'], // body上面有换行
      'footer-leading-blank': [1, 'always'], // footer上面有换行
      'header-max-length': [2, 'always', 108], // header上最大108字符
      'type-case': [0],
      'type-empty': [0],
      'scope-empty': [0],
      'scope-case': [0],
      'subject-full-stop': [0, 'never'],
      'subject-case': [0, 'never'],
      'type-enum': [
        2,
        'always',
        [
          'feat', // 新增功能、页面
          'fix', // 修补bug
          'docs', // 修改文档、注释
          'style', // 格式：不影响代码运行的变动、空格、格式化等等
          'ui', // ui修改：布局、css样式等等
          'hotfix', // 修复线上紧急bug
          'build', // 改变构建流程，新增依赖库、工具等（例如:修改webpack）
          'refactor', // 代码重构，未新增任何功能和修复任何bug
          'revert', // 回滚到上一个版本
          'perf', // 优化：提升性能、用户体验等
          'ci', // 对CI/CD配置文件和脚本的更改
          'chore', // 其他不修改src或测试文件的更改
          'test', // 测试用例：包括单元测试、集成测试
          'update' // 更新：普通更新
        ]
      ]
    }
  }
  

在husky文件夹中创建commit-msg 文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit 

这步结束，我们就可以试着提交我们的代码了，可知，在没有带前缀规范的格式下，是无法提交的

但，我们不可能每次都手写commit 前缀，这是浪费时间的
安装 git-cz，省略手动写提交前缀

npm install -g git-cz commitizen
pnpm add -w git-cz -D

配置（ package.json ）

{
    "config": {
        "commitizen": {
            "path": "git-cz"
        }
    }
}

配置 script（ package.json ）

{
    "scripts": {
        "commit": "git-cz"
    }
}

在根目录中添加changelog.config.cjs

'use strict';
module.exports = {
  types: [
    { value: 'feat', name: '新增：新增功能、页面' },
    { value: 'fix', name: 'bug：修复某个bug' },
    { value: 'docs', name: '文档：修改增加文档、注释' },
    { value: 'style', name: '格式：不影响代码运行的变动、空格、格式化等等' },
    { value: 'ui', name: 'ui修改：布局、css样式等等' },
    { value: 'hotfix', name: 'bug：修复线上紧急bug' },
    { value: 'build', name: '测试：添加一个测试' },
    { value: 'refactor', name: '重构：代码重构，未新增任何功能和修复任何bug' },
    { value: 'revert', name: '回滚：代码回退到某个版本节点' },
    { value: 'perf', name: '优化：提升性能、用户体验等' },
    { value: 'ci', name: '自动化构建：对CI/CD配置文件和脚本的更改' },
    { value: 'chore', name: '其他修改：不修改src目录或测试文件的修改' },
    { value: 'test', name: '测试：包括单元测试、集成测试' },
    { value: 'update', name: '更新：普通更新' },
  ],
  // 交互提示信息
  messages: {
    type: '选择一种你的提交类型：',
    scope: '选择一个影响范围（可选）:',
    customScope: '表示此更改的范围：',
    subject: '短说明：\n',
    body: '长说明，使用"|"符号换行（可选）：\n',
    breaking: '非兼容性说明（可选）：\n',
    footer: '关闭的issue，例如：#31, #34（可选）：\n',
    confirmCommit: '确定提交说明?（yes/no）',
  },
  allowCustomScopes: true,
  // 设置选择了那些type，才询问 breaking message
  allowBreakingChanges: ['feat', 'fix', 'ui', 'hotfix', 'update', 'perf'],
  subjectLimit: 100,
};

接着执行脚本，这就很舒服了

安装lerna

这里推荐全局安装，项目内安装也行

npm i lerna -g

安装后，在项目内初始化lerna

lerna init

这步结束会在根目录下创建一个lerna.json的文件，我们将下面的内容添加进这个文件中

  "packages": [
    "packages/*"
  ],

步骤阶段总结

完成上面的步骤，就完成了初步的初始化了，现在将项目进行整理，就目前来说，我们的项目结构如下

将网站（文档站点）移入packages中

先进入packages文件夹中，执行lerna初始化，lerna create site，为了规范，这里我将packages下的包名统一以我的ui组件开头命名 @nfui/**， 你们也可以选择你们自己喜欢的名字

接着，我们需要将根目录以下的文件，移入一份到site文件夹中

vue.config.ts、
vite.config.ts、
tsconfig.json、
index.html、
tsconfig.node.json、
src文件夹 
public文件夹

在site目录中的package.json中增加运行脚本

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

根目录的运行脚本同步修改

  "scripts": {
    "dev": "pnpm -C packages/site dev",
  }

以上脚本见名知意，我就不解释了
做完这步，我们在根目录运行脚本命令试试结果pnpm dev

一切正常就代表以上的步骤都是成功的

创建组件目录

同样使用lerna创建组件目录，lerna create components，这里我同样统一前缀，@nfui/components

接下来就不手打了，你们看的也累，我打字也累，按照以下格式创建指定文件

创建按需引入文件components/button/index.ts增加以下内容

import { App } from "vue";
import NfButton from "./src/button.vue";

NfButton.install = (app: App) => {
  app.component(NfButton.name, NfButton);
};

export default NfButton;

创建统一引入文件components/index.ts

import { App } from "vue";
import Button from "./button/src/button.vue";

const components = [Button];

const install = (app: App) => {
  components.forEach((component) => {
    app.component(component.name, component);
  });
};

export default { install };

这步结束，我们的初始化搭建就接近尾声了，开始我们修改的测试

文档引入组件测试

进入文档网站目录，在package.json中引入依赖

"@nfui/components": "^0.0.0"

在src/main.ts中增加引入，如下

接下来就和一般组件库一样，就能在网站中欢乐的使用了


初始化准备差不多就到此结束了，接下来就是组件和样式编写了，后续内容可能也会继续编写，源码在最上方分享在gitee了，如需要的话可以自取