应用vite构建Vue3组件库，公布npm包

在国内用vue框架开发的是十分之多的，应用vue开发组件封装是一个很普片的事件了，封装好一个组件能够在我的项目的任意中央去应用，咱们还能够从npm仓库下载他人封装的组件进行应用，比方element-ui,vant等组件库，然而因为不同的公司，不同的网站格调，是咱们在开发中还是得本人封装本人的组件，要想在不同我的项目上应用本人封装的组件，不可能去旧我的项目复制组件代码到新的我的项目外面去。所以咱们能够将组件上传到npm仓库，应用的时候间接从npm装置应用。

1.创立根底的vite 脚手架

npm create vite  vite-demo(项目名称) --template vue

而后如下图所示，我的项目名为vite-demo 而后抉择vue框架，抉择vue

2.革新vite-dome

创立好根本我的项目后，用本人相熟的编程软件关上艳羡，在控制台输出npm i装置相干的包并对文件进行革新

如下图：

3.组件封装

3.1创立组件文件

在src\components文件加下新建一个muk-ui用于寄存所有的组件文件，在muk-ui文件夹中创立一个button组件如图所示

3.2编写组件

留神这里我是用了less布局，所以要下载less包，npm i less装置less包。要想前面导出的时候应用name属性，必须定义name属性，因为setup语法糖不反对定义name属性，所以咱们能够定义两个script标签，也能够不必setup语法糖，还能够应用插件解决，这里就不说是什么插件了，放个连贯本人去看
<script setup>/** * 接管传过来的值 * * @param size 定义按钮的大小 可选值为 'large' | 'middle' | 'small' | 'mini' * @param type 定义按钮的类型 默认不填 */defineProps({    size: {        type: String,        default: "middle",    },    type: {        type: String,        default: "default",    },});</script><script>export default {    name: "MukButton",};</script><template>    <button class="muk-btn" :class="[size, type]">        <!-- 定义插槽用于让用户自定义按钮你们的内容 -->        <slot></slot>    </button></template><style scoped lang="less">.muk-btn {    appearance: none;    border: none;    outline: none;    background: #fff;    text-align: center;    border: 1px solid transparent;    border-radius: 4px;    cursor: pointer;}.large {    width: 240px;    height: 50px;    font-size: 16px;}.moddle {    width: 180px;    height: 50px;    font-size: 16px;}.small {    width: 100px;    height: 32px;}.mini {    width: 60px;    height: 32px;}.default {    border-color: #e4e4e4;    color: #666;}.primary {    border-color: skyblue;    background: skyblue;    color: #fff;}.plain {    border-color: skyblue;    color: skyblue;    background: lighten(skyblue, 50%);}.gray {    border-color: #ccc;    background: #ccc;    color: #fff;}</style>

3.3导出组件

在src\components\muk-ui文件夹下新建index.js用于导出组件

import Button from "./button/index.vue";// 按需引入export { Button };const component = [Button];const MukUI = {    install(App) {        component.forEach((item) => {            App.component(item.name, Button);        });    },};export default MukUI;

3.4本地验证组件是否用

在sec\main.js注册组件

import { createApp } from "vue";import "./style.css";import App from "./App.vue";import MukUI from "./components/muk-ui"; //导入const app = createApp(App);app.use(MukUI); //注册app.mount("#app");

在src\App.vue外面去应用按钮

<script setup></script><template>    <MukButton size="large" type="primary">我是测试组件</MukButton></template><style scoped></style>

而后在终端输出npm run dev运行 如图所示就胜利了

3.5 配置vite.config.js文件

在我的项目的根目录的vite.config.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: "muk-ui", //输入文件名称        lib: {            entry: path.resolve(__dirname, "./src/components/muk-ui/index.js"), //指定组件编译入口文件            name: "muk-ui",            fileName: "muk-ui",        }, //库编译模式配置        rollupOptions: {            // 确保内部化解决那些你不想打包进库的依赖            external: ["vue"],            output: {                // 在 UMD 构建模式下为这些内部化的依赖提供一个全局变量                globals: {                    vue: "Vue",                },            },        }, // rollup打包配置    },});

3.6运行打包命令

在终端应用npm run build 如下图所示呈现以下文件就打包胜利了

4.上传到npm官网

4.1打包上传前的筹备

上传之前咱们要做一些配置筹备的

4.1.1配置package.json

首先咱们在打包好的muk-ui目录下，关上终端，而后执行npm init -y命令初始化package.json

package.json是用来配置咱们上传到npm仓库的的版本号等配的

初始化后咱们能够看到到该目录下的一些根本配置

而后咱们批改配置如下：

{    "name": "muk-ui", //包名字      "private": false,     "version": "0.0.1", //版本号    "description": "一个简略的组件库",    "main": "muk-ui.js",    "scripts": {        "test": "echo \"Error: no test specified\" && exit 1"    },    "keywords": ["muk","muk-ui","MukUI","MUKUI","vue3-muk-ui"],//在npm上可被搜寻的关键字    "author": "",    "license": "ISC"}

4.2上传到npm

4.2.1 注册npm账号

想要公布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，留神记住用户名、明码和邮箱，公布的时候可能会用到。

4.2.2设置npm源

在国内很多小伙伴喜爱把本地的npm镜像源采纳的是淘宝镜像源或者其它的，如果想要公布npm包，咱们得吧咱们得npm源切换为官网得源，命令如下：

npm config set registry=https://registry.npmjs.org
4.2.3登录到npm

在打包后的文件根目录关上终端，输出npm login登录到官网

实现如下图步骤就胜利登陆了

4.2.4推送到npm仓库

输出npm publish就能够正式公布到npm仓库了

留神：公布前要保障没有雷同的包名，否则无奈公布，每次公布的版本号必须不同

输出长期验证码后回车看到如下图所示就证实胜利了

留神：公布前要保障没有雷同的包名，否则无奈公布，每次公布的版本号必须不同

4.2.5查看npm包

上传胜利后能够在npm官网上通过本人设置的keywords关键字查到本人上传的组件

4.3下载与应用

4.3.1下载

通过npm i muk-ui下载咱们npm仓库的包如图所示就下载胜利了

就能够在node_modules文件夹下找到咱们的组件包

4.3.2应用组件

  1. 在src\main.js中引入下载的包，并引入其款式import "../node_modules/muk-ui/style.css";

    import { createApp } from "vue";import "./style.css";import App from "./App.vue";import "../node_modules/muk-ui/style.css"; //引入组件款式import MukUI from "muk-ui"; //引入下载后的组件const app = createApp(App);app.use(MukUI); //注册app.mount("#app");

  2. 在src\App.vue上来应用

    <script setup></script><template>    <MukButton size="large" type="primary">我是测试组件</MukButton></template><style scoped></style>
  3. 应用npm run dev启动我的项目查看成果，如下图所示就证实胜利了