手写Vue3组件库-CFANZ编程社区

一、使用vite创建项目

npm init @vitejs/app 项目名

选择vue-ts，回车。

项目创建成功。

1. 安装依赖

npm i

2. 运行项目

npm run dev

ps: 使用vite 创建项目的第一感觉就是当npm run dev 的时候跑项目飞快。

3. VS code安装vue3配套插件Volar

手写Vue3组件库_Vue3

由于ts 中不包含NodeJS中的对象库，

因此我们在引入node的一些模块，比如path的时候，会报错，因此本地需要安装npm i --save-dev @types/node。

4. 修改配置

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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'))
  }
}

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

tsconfig.json 中添加include和paths配置

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true
  },
  "include": ["examples/**/*.ts",
    "examples/**/*.tsx",
    "examples/**/*.vue",
    "packages/**/*.ts",
    "packages/**/*.tsx",
    "packages/**/*.vue",
    "typings/**/*.ts",
    "tests/**/*.ts",
    "tests/**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "paths": {
    "~/*": [
      "packages/*"
    ]
  }
}

package.json 中添加配置

修改 package.json 中发布到 npm 的字段

name：包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
version：版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
description：描述。
main：入口文件，该字段需指向我们最终编译后的包文件。
typings：types文件，TS组件需要。
keyword：关键字，以空格分离希望用户最终搜索的词。
author：作者信息
private：是否私有，需要修改为 false 才能发布到 npm
license：开源协议

并在package.json的scripts 新增编译和发布的命令。

其中 build:lib 是利用 vue-cli 进行 umd 方式打包，build:esm-bundle 是利用 rollup 进行 es 方式打包，具体参数解析如下：

–target: 构建目标，默认为应用模式。改为 lib 启用库模式。
–name: 输出文件名
–dest : 输出目录，默认 dist。改成 lib
[entry]: 入口文件路径，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。

{
    "name": "shancai-ui-vue3",
    "private": true,
    "version": "0.0.0",
    "description": "基于vue3+vant的前端组件库",
    "main": "lib/index.min.js",
    "module": "lib/index.esm.js",
    "typings": "lib/index.d.ts",
    "keyword": "vue3 vant",
    "license": "MIT",
    "author": {
        "name": "shancaijiangzi",
        "email": "1846015350@qq.com"
    },
    "scripts": {
        "dev": "vite",
        "preview": "vite preview",
        "build": "vue-tsc --noEmit && vite build",
        "build:clean": "rimraf lib",
        "build:lib": "vue-cli-service build --target lib --name index --dest lib packages/index.ts",
        "build:esm-bundle": "rollup --config ./build/rollup.config.js"
    },
    "dependencies": {
        "vue": "^3.2.25"
    },
    "devDependencies": {
        "@types/node": "^17.0.42",
        "@vitejs/plugin-vue": "^2.3.3",
        "typescript": "^4.5.4",
        "vite": "^2.9.9",
        "vue-tsc": "^0.34.7"
    }
}

二、开发组件

在packages文件夹中新建 button文件夹和index.ts ，button中新建 src 文件夹和index.ts ，src中新建button.vue。

手写Vue3组件库_版本号_02

1. Button.vue

<template>
  <button class="nd-btn">
    <span v-if="$slots.default">
        <slot></slot>
    </span>
  </button>
</template>

<script lang="ts"> 
import { defineComponent } from "vue"
export default defineComponent({
    name: 'nd-button'
})
</script>

<style scoped>

</style>

2. button/index.ts

单独组件的入口文件，在其他项目中可以使用import {xxx} from 'shaicai-ui-vue3’方式进行单个组件引入。

import { App } from 'vue'
import Button from './src/button.vue'
 
// 定义 install 方法， App 作为参数
Button.install = (app: App): void => {
    app.component(Button.name, Button)
}
 
export default

3.组件库的入口文件index.ts

可以在其他项目的main.ts引入整个组件库。

// index.ts 作为组件库的入口文件，可以在其他项目的main.ts引入整个组件库
import {App} from 'vue'
import NdButton from './button'

// 所有组件列表
const components = [NdButton]
// 定义install 方法，App作为参数
// 遍历注册所有组件
const install = (app:App):void => {
    components.map((component) => app.component(component.name,component))
}
export {
    NdButton
}
export default {
    install
}

至此，完成了一个简单的button组件，后续需要扩展其他组件，可以按照button的结构进行开发，并且在index.ts 文件中的components组件列表中添加即可。

三、测试组件

组件开发完成后，我们可以先在本地测试一下，没有问题再发布到npm仓库。

在main.ts 引入我们的组件库

import { createApp } from 'vue'
import App from './App.vue'
import ShaicaiVue from '~/index'  // 这里 ~ 就是在 tsconfig.json 以及 vue.config.js 配置的 packages 路径
 
const app = createApp(App)
app.use(NanditVue)
app.mount('#app')

App.vue 中引入并使用 MyButton 组件

<template>
<div id="app">
  <MyButton>我是按钮啊哈哈</MyButton>
</div>
</template>

<script lang="ts" setup>import MyButton from '../packages/button/index'</script>
<style lang="scss" scoped>

</style>

启动项目,npm run dev

手写Vue3组件库_json_03

四、发布组件

组件开发并测试通过后，就可以发布到npm 仓库提供给其他项目使用了。

npm run build

发布到npm 官网
需要到官网注册npm 账号，如果已经注册过，请跳过此步骤。
登录npm 账号

npm login
填写在npm注册的账号、密码、邮箱。

发布
确认 registry 是https://registry.npmjs.org

npm config get registry

如果不是，则先修改 registry

npm config set registry=https://registry.npmjs.org

然后执行发布命令：

npm publish

** 如果这里报了下面这个错误：

npm ERR! code EPRIVATE
npm ERR! This package has been marked as private
npm ERR! Remove the ‘private’ field from the package.json to publish it.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2022-06-14T08_21_43_070Z-debug.log

解决办法：删除package.json 中的private 字段，或将其设置为false。之后重新打包并发布即可。

手写Vue3组件库_typescript_04

发布成功！

之后，你可以新建一个项目vue create test-shancai-ui-vue3，然后 npm i shancai-ui-vue3
将你刚刚发布的这个包添加为依赖项。由于我们之前已经在packages/index.ts 中对组件进行了全局注册，所以我们现在可以直接在template中使用。