构建 Vue3 组件库 - 安装依赖

发布于：

Table of contents

展开目录

目录

源码

typescript

ts 项目首先需要安装 typescript，提供 tsc 来编译 .ts 文件。

npm i -D typescript

@types/node

开发组件库不可避免的会编码一些脚本文件，会用到 nodejs 中的包，如：node:path，

安装 @types/node 来提供这些包的类型声明文件。

npm i -D @types/node

vue

vue ≥ 3.3

每一个 Vue Component 都会有 name 属性，平时封装业务组件的时候，并不是特别在意这个属性，

开发组件库 name 会变的尤其重要。

注意这里 vue 的版本，需要 ≥3.3，因为 3.3 版本之后提供了更多的宏，例如 defineOptions，

这个宏可以很方便的在 <setup> 中定义组件的 name，更多特性可以参考：《Vue 3.3 主要新特性详解》。

3.3 之前的版本，需要使用 unplugin-vue-define-options，才能在 <setup> 中开启 defineOptions，

具体可以参考：defineOptions。

npm i -D vue

因此需要配置 package.json：

package.json
{
  "peerDependencies": {
    "vue": "^3.3.x"
  },
  "engines": {
    "node": ">= 16"
  }
}

vue-tsc

vue-tsc 是对 typeScript 自身命令行界面 tsc 的一个封装，除了 .ts 文件，它还能支持 Vue 的 SFC 文件。

npm i -D vue-tsc

vite

《上一篇》 介绍过会使用 vite 来打包及调试组件库。

npm i -D vite

@vitejs/plugin-vue

在 vite 中提供单文件组件支持。

npm i -D @vitejs/plugin-vue

vite-plugin-dts

从 .ts(x) 或 .vue 源文件生成类型文件（*.d.ts）的 Vite 插件。

npm i -D vite-plugin-dts

vitepress

《上一篇》 介绍过会使用 vitepress 来构建文档站点。

vitepress 的文档，一定要参考它的 英文文档，中文文档 的版本比较旧了。

npm i -D vitepress

sass

在 vite 中支持 sass 预处理，

如果使用其他预处理器，可以参考 CSS 预处理器。

npm i -D sass

prettier

结合 .prettierrc 统一所有目录的缩进、换行等。

npm i -D prettier

eslint

结合 .eslintrc 统一所有目录语法等。

npm i -D .eslintrc

@typescript-eslint

接下来需要安装，@typescript-eslint/parser 和 @typescript-eslint/eslint-plugin，这篇文章 讲述的非常清楚，可以参考了解一下 eslint 与 typescript 之间的关系。

@typescript-eslint/parser

为了让 eslint 也能识别出 typescript 所转换出的 ast，需要将 eslint.parserOptions.parser 设置为 @typescript-eslint/parser。

npm i -D @typescript-eslint/parser

@typescript-eslint/eslint-plugin

提供 typescript 语法的检查规则。

npm i -D @typescript-eslint/eslint-plugin

eslint-plugin-vue

eslint 默认的 parser 只会转换 js 文件， 为了支持 Vue SFC 的语法检查，需要安装 eslint-plugin-vue，详细可参考 官方文档

npm i -D eslint-plugin-vue

最基础的用法，如：

.eslintrc
module.exports = {
  extends: [
+    'plugin:vue/vue3-recommended',
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

.eslinrc

.eslintrc
{
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    // override rules...
  },
  "parser": "vue-eslint-parser",
  "plugins": ["@typescript-eslint"],
  "root": true,
  "parserOptions": {
    "parser": "@typescript-eslint/parser"
  },
  "overrides": [
    {
      "files": "*"
    }
  ]
}