手把手教学：VUE3+TS组件库开发与发布

前言

当市面上主流的组件库不能满足我们业务需求的时候，那么我们就有必要开发一套属于自己团队的组件库。 以下用一个简单的组件来讲述基于Vue3.0 + TS的组件从开发到发布npm仓库的全过程（参考element-plus）

环境

这里列出本文所使用的环境版本

• vue 3.0

• vue/cli 4.5.9

• nodeJs 14.15.1

• npm 6.14.8

> vue --version
@vue/cli 4.5.9

> npm -v
6.14.8

> node -v
v14.15.1

步骤

1. 创建项目

使用 vue-cli 创建一个 vue3 项目，假设项目名为 nandit-vue-vant

> vue create nandit-vue-vant

选择自定义Manually select features，回车进入下一步

选中Choose Vue version、Babel 、TypeScript、 CSS Pre-processors 这4项，回车进入下一步

• Choose a version of Vue.js that you want to start the project with 选择 3.x (Preview)
• Use class-style component syntax? 输入n
• Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 输入y
• Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default) 选择 Sass/SCSS (with dart-sass)
• Where do you prefer placing config for Babel, ESLint, etc.? 选择 In dedicated config files
• Save this as a preset for future projects? 输入y，回车后输入模板名保存模板

 

 最后回车，等待项目创建完成

创建完成，目录结构如图

2. 规划目录

├─ build         // 编辑打包脚本目录，用于存放脚本文件
│  ├─ rollup.config.js
├─ docs          // 文档目录，用于生成 vuepress 文档页面
│  ├─ .vuepress
│  ├─ guide
│  ├─ README.md      
├─ examples      // 原 src 目录，改成 examples 用于示例展示
│  ├─ App.vue
│  ├─ main.ts
├─ packages      // 新增 packages 目录，用于编写存放组件，如button
│  ├─ button
│  ├─ index.ts
├─ typings      // 新增 typings 目录，用于存放 .d.ts 文件，把shims-vue.d.ts移到这里
│  ├─ shims-vue.d.ts
├─ .npmignore    // 新增 .npmignore 配置文件
├─ vue.config.js // 新增 vue.config.js 配置文件

将 src 目录改为 examples ，并将里面的 assets 和 components 目录删除，移除 App.vue 里的组件引用。

调整后的目录结构如图

3. 项目配置

3.1 vue.config.js

新增 vue.config.js 配置文件，适配重新规划后的项目目录

const path = require('path')

module.exports = {
  // 修改 pages 入口
  pages: {
    index: {
      entry: "examples/main.ts", //入口
      template: "public/index.html", //模板
      filename: "index.html" //输出文件
    }
  },
  // 扩展 webpack 配置
  chainWebpack: (config) => {
    // 新增一个 ~ 指向 packages 目录, 方便示例代码中使用
    config.resolve.alias
      .set('~', path.resolve('packages'))
  }
}

3.2 .npmignore

新增 .npmignore 配置文件，组件发布到 npm 中，只有编译后的发布目录（例如lib）、package.json、README.md才是需要被发布的，所以我们需要设置忽略目录和文件

# 忽略目录
.idea
.vscode
build/
docs/
examples/
packages/
public/
node_modules/
typings/

# 忽略指定文件
babel.config.js
tsconfig.json
tslint.json
vue.config.js
.gitignore
.browserslistrc
*.map

3.3 tsconfig.json

修改 tsconfig.json 中 paths 的路径

    "paths": {
      "@/*": [
        "src/*"
      ]
    }

改为