Vue3+vite封装自己的UI库上传NPM

初始化项目

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

文件目录

文件夹	说明
lib	打包目录
examples	组件案例目录
node-modules	安装依赖目录
packages	组件目录
public	文件资源目录
.npmignore	上传npm忽略文件
package.json	项目配置信息文件
vite.config	项目配置文件
README	说明文件

尝试着创建组件

我们先来尝试着封装一个简单的Button组件,我们在packages/button/src目录下创建button.vue组件

<template>
  <button>
      <span> <slot>Submit</slot></span>
  </button>
</template>
<script >
export default { name: 'GaButton' }
</script>
<script setup>

</script>

<style scoped>

</style>

导出组件

在packages/button目录下新建index.js,用于按需导入导出组件

import GaButton from './src/button.vue'
GaButton.install = (app) => {
    app.component(GaButton.name,GaButton);
}
export default GaButton;

导出所有的组件

在packages文件下新建index.js，当组件库被使用时自动注册到component上

import GaButton from './button'
const components = [
    GaButton
]
// 定义install方法
const install = (app) => {
    // 注册所有的组件
    components.forEach(item => {
        console.log('app',app,item)
        app.component(item.name, item)
    })
}
const GalaxyUI = {
    install
}
//支持按需导入
export {
    GaButton
}
//导出install方法
export default GalaxyUI;

在页面上测试

我们先修改一下入口文件，把src改成examples，然后修改index.html文件中的脚本路径（script的src属性值）

<script type="module" src="/examples/main.js"></script>

在main.js上引入组件库

import { createApp } from 'vue';
import App from './App.vue';
import GalaxyUI from "../packages/index.js";
const app = createApp(App);
app.use(GalaxyUI);
app.mount('#app');

在App.vue中使用GaButton组件

<template>
  <div>
    <ga-button></ga-button>
  </div>
</template>

<script setup>
</script>

运行结果

说明我们的已经正确的引入了组件库

打包输出lib库

• 配置vite.config.js文件

首先需要修改vite.config.js文件，对其进行配置修改成库打包的模式，这里输出内容到lib文件夹中，打包入口文件设置为./packages/index.js文件，最终配置如下所示：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'lib',
    lib: {
      //指定组件编译入口文件
      entry: path.resolve(__dirname,'packages/index.js'),
      name: 'GalaxyUI',
      fileName: 'galaxy-ui',
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }

  }
})

执行npm run build,生成lib目录，里面包含了UMD、ESM规范打包的几个js库文件，整个组件库文件最终都会输出在lib文件夹下。

上传到NPM

• package.json

传之前还需要做一些配置准备工作，首先配置一下package.json文件，如下所示：

{
  "name": "galaxy-vui",//name是唯一的，如有相同的就要修改，不然上传失败
  "private": false,//private必须是false
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite --force --host",
    "build": "vite build",
    "preview": "vite preview"
  },
  "files": [
    "lib"
  ],
  "main": "lib/galaxy-ui.umd.cjs",
  "module": "lib/galaxy-ui.js",
  "style": "lib/style.scss",
  "exports": {
    "./lib/style.scss": "./lib/style.scss",
    ".": {
      "import": "./lib/galaxy-ui.js",
      "require": "./lib/galaxy-ui.umd.cjs"
    }
  },
  "dependencies": {
    "sass": "^1.58.3",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.1.0"
  }
}

• .npmignore

在.npmignore配置忽略目录

# 要忽略目录和指定文件
.vscode
examples/
packages/
public/
vite.config.js
*.map
*.html

• 最后执行打包命令

npm run build

• 发布

查看自己使用的是否为npm官方源(必须是官方源)

npm get registry   //查看使用的是什么源
npm config set registry https://registry.npmjs.org/     //切换官方源
npm config set registry http://registry.npm.taobao.org   //切换淘宝源

也可以使用nrm来切换npm源

先安装

 npm install -g nrm

查看所有源

nrm ls
  npm ---------- https://registry.npmjs.org/ 
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

当前已经是npm官方源，如果不是的话切换

切换

nrm use npm

• 登录npm

如果没有账号先去官方注册

执行登录命令

npm login

这时会让你输入用户名、密码、邮箱，也有可以给你一个web让你验证，验证完后即可。如果你想知道自己是否登录成功可以执行:

npm whoami

如果出现用户名说明已经登录成功。

接下来就是发布,在我们的项目下执行

npm publish

如果发布失败，那么有以下几种可能

1. version  //和之前发布的版本号一样，换一个即可

2. private  //没有设置为false

3. name     //在npm官网上名字已经存在。换一个即可

使用UI库

发布成功后，我们可以登录npm看我们发布的包。

以下就是安装依赖的常规步骤了

npm install galaxy-vui  //因为跟别的库同名了，这里改了一下name

使用 main.js中引入

import GalaxyVui from 'galaxy-vui'
app.use(GalaxyVui);
app.mount('#app');

页面上使用

<ga-button></ga-button>