vue 组件发布到 npm

1、创建 vue 项目

vue create my-ui

2、创建组件库

在根目录下创建目录 packages

2.1 配置组件 package.json

进入 pakages 文件目录下，执行 npm init -y，执行完后生成 package.json

{
  "name": "my-ui",
  "version": "0.0.1",
  "description": "",
  "main": "lib/index.js", // 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "sanyer",
  "license": "ISC"
}

2.2 创建组件

packages/lib/my-test

在 packages 下创建 lib 目录，再创建 my-test 组件目录

-packages
  lib // 组件
    my-test // 组件目录
      src
        my-test.vue
      index.js // 导出当前组件
    index.js // 导出所有组件

packages/lib/my-test/index.js

import MyTest from './src/main';

/* istanbul ignore next */
MyTest.install = function (Vue) {
  Vue.component(MyTest.name, MyTest);
};

export default MyTest;

packages/lib/my-test/src/main.vue

<template>
  <div class="my-test">{{ text }}</div>
</template>

<script>
  export default {
    name: 'MyTest',
    data() {
      return {
        text: 'hello world',
      };
    },
  };
</script>

packages/lib/index.js

import MyTest from './my-test';

const components = [MyTest];

const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  MyTest,
};

3、编写样式

packages/lib/theme-chalk/index.scss

导入全部样式

@import './hl-search.scss';

packages/lib/theme-chalk/hl-search.scss

单个组件样式

.hl-search {
  color: rgb(255, 0, 0);
}

4、打包配置

# 打包组件
npm run build:lib
# 打包样式
npm run build:css

4.1 package.json

配置根目录下 package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "build:lib": "vue-cli-service build --target lib ./packages/lib/index.js --dest ./packages/dist-lib --name my-ui",
  "build:css": "gulp build"
},

4.2 打包样式

这里使用 gulp 打包

（1）安装 gulp

npm i gulp gulp-sass gulp-cssmin gulp-autoprefixer -D

（2）配置 gulp

根目录下创建 gulpfile.js

'use strict';

const { series, src, dest } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

function compile() {
  return src('./packages/lib/theme-chalk/*.scss')
    .pipe(sass())
    .pipe(
      autoprefixer({
        browsers: ['ie > 9', 'last 2 versions'],
        cascade: false,
      }),
    )
    .pipe(cssmin())
    .pipe(dest('./packages/dist-theme-chalk')); // 打包后的目录
}

function copyfont() {
  return src('./packages/lib/theme-chalk/fonts/**')
    .pipe(cssmin())
    .pipe(dest('./packages/dist-theme-chalk/fonts')); // 字体文件打包
}

exports.build = series(compile, copyfont);

5、发布到 npm

1. 进入 pakages 文件夹，打开 cmd 窗口

2. 如果没有 npm 账号，登录 https://www.npmjs.com/ 官网去注册账号

3. 切换 nrm 的地址为 npm 原地址，若果没有安装 nrm，先安装

npm i nrm -g

4. 执行 nrm ls 查看当前的路径，执行 nrm use npm 切回 npm 原路径

nrm ls
nrm use npm

5. 执行 npm login，输入用户名和密码

npm login

6. 执行 npm publish，发布到 npm

npm publish

7. 登录官网，点击小头像进入到 packages 下看看是否有自己的包

6、引入自己发布的包

1. 安装

npm i my-ui

2. 在 main.js 中引入

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import MyUi from 'my-ui'; // 引入入口文件
import 'my-ui/my-ui.css'; // 引入样式文件
Vue.use(MyUi); // vue使用组件

Vue.config.productionTip = false;

7、更新自己发布的包

若修改了组件，要更新到 npm 上，则改完后执行下面这三个命令中的一个

npm version patch   // 如果说要改为1.0.x，最后一位增加了1，这个是补丁的意思，就是小小的改一下
npm version minor   // 如果说要改为1.x.0，中间一位增加了1，这个是小修小改
npm version major   // 如果说要改为x.0.0，第一位增加了1，这个是大改

然后再发布即可

npm publish

项目上更新包需要修改 package.json 包的组件的版本号，然后执行：

npm update my-ui

8、参考

https://blog.csdn.net/qq_47452289/article/details/122435654