npm包 - 发布vue组件
npm包 - 发布vue组件
一. 环境准备
npm install -g @vue/cli
二. 创建项目
vue create vue-page-card-drag
本文使用vue2
打开package.json，在rules下添加
"no-unused-vars": "off"
三. 开发组件/加入组件
可以将已经编写好的组件移动到components目录下，或者新建一个vue组件，步骤是一样的。
例如我这里新建了一个HelloWorld.vue组件，需要注意的是，组件必须有name，这将会是用户使用的组件名称
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: "HelloWorld", props: { msg: String, }, }; </script> <style scoped> .hello { width: 200px; height: 150px; border: 1px solid red; } </style>
然后修改App.vue
<template> <div id="app"> <HelloWorld msg="App pp pack" /> </div> </template> <script> import HelloWorld from "./components/HelloWorld.vue"; export default { name: "App", components: { HelloWorld, }, }; </script> <style scoped> </style>
运行 npm run serve
在src文件夹下新建index.js文件
import HelloWorld from "@/components/HelloWorld.vue"; const components = [HellowWorld]; const install = (Vue, options) => { if (install.installed) return; install.installed = true; components.forEach((component) => { Vue.component(component.name, component); }); }; // 如果是直接引入的vue.js方式，则会挂到window下 if (typeof window !== "undefined" && window.Vue) { install(window.Vue); } export default { // 使用Vue.use必须具有install方法 install, ...components, };
修改配置文件
将项目根目录下的package.json文件：
scripts修改start和build命令：
"scripts": { "serve": "vue-cli-service serve", "start": "vue-cli-service build --target lib --name vue-page-card-drag --dest lib src/index.js --watch", "build": "vue-cli-service build --target lib --name vue-page-card-drag --dest lib src/index.js", "build:app": "vue-cli-service build", "lint": "vue-cli-service lint" },
这里的–target lib是 vue-cli 自带的打包命令，此命令会将入口文件打包成一个库码，具体可参考官网说明vue-cli官方文档
–name 指的是打包后的文件名
–dest 指文件夹的名称
紧跟的src/index.js 指的是执行上文新建的index文件，暴露install方法
执行命令
npm run start
执行成功之后会在项目根目录增加lib文件夹：
如果组件库过大，可能会报错:allocation failure scavenge might not succeed。可以通过关闭内联css(下文有介绍)或者修改--max_old_space_size=10000（可自行百度）尝试解决
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 为false则强制内联，区别是最终lib文件夹中不会生成单独的css文件
// 设置为true，则不会内联css,最红lib文件如上图会有单独的css文件生成，用户使用组件包时需要在main.js中手动引入：import 'vue-libs-demo/lib/vue-libs-demo.css'
css: { extract: true }
})
修改package.json文件中main配置项——外部访问项目包的入口文件；
// 最终lib文件夹生成的umd.js "main": "lib/vue-page-card-drag.umd.js"
在package.json文件配置files，使用到的文件。
"files": [ "lib/*" ],
创建 vue.config.js 文件，强制将样式打到js里，否则项目中引用插件时 没有样式
module.exports = { css: { // 强制将样式打到js里 extract: false, loaderOptions: { less: { javascriptEnabled: true } } } }
四. 调试
1、执行打包命令
// 开发环境执行 npm run start // 正式发布执行 npm run build
2、发布本地连接包
npm link
3、测试项目
按上面构建项目的步骤重新新建一个项目用于测试（或者用随便一个就项目都行），然后在测试项目的目录终端执行
npm link vue-page-card-drag
然后修改测试项目的main.js:
import Vue from "vue"; import App from "./App.vue"; import HelloWorld from "vue-page-card-drag"; Vue.use(HelloWorld); Vue.config.productionTip = false; new Vue({ render: (h) => h(App), }).$mount("#app");
在App.vue中使用：
<template> <div class="container"> <HelloWorld msg="测试组件" /> </div> </template>
然后运行项目
npm run serve
五. 发布
测试没问题后就可以发布到nodejs了
先发布项目
npm run build
如报错：Error: error:0308010C:digital envelope routines::unsupported
修改scripts修改build命令：
增加 SET NODE_OPTIONS=--openssl-legacy-provider
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --target lib --name vue-page-card-drag --dest lib src/index.js",
1、注册
注册npm账号 点击注册，参考：https://www.cnblogs.com/1285026182YUAN/p/17097318.html
2、本地登陆
按步骤注册完成以后，打开命令行工具，并定位到项目目录
中间会需要输入用户名、密码、邮箱、邮箱验证码
npm login
如果中间出错的话，可能是由于设置了淘宝镜像，重新设置一下即可：
npm config set registry https://registry.npmjs.org/
4. 发布 npm 包
npm publish
报错：npm ERR! 402 Payment Required - PUT https://registry.npmjs.org/@xxx%2fxxx - You must sign up for private packages 问题
这个当你的包名为@your-name/your-package时才会出现，原因是当包名以@your-name开头时，npm publish会默认发布为私有包，但是 npm 的私有包需要付费，所以需要添加如下参数进行发布:
npm publish --access public
报错：npm ERR! 404 '' is not in this registry.
出现错误的原因是，我在npm上的用户名是A,而我的包名是 @B/xxxx。
npm规定包名中，@后是用户名，我这里是B，而我的用户名是A。这就是报错的原因。
注：包名不能有大写字母
注：更新发布时，版本不能重复
六. 使用
在测试项目中卸载连接包
npm unlink vue-page-card-drag
然后安装发布成功的包
npm install hatelier-vue-page-card-drag --save
最后运行
npm run serve
注：如npm包中引用了第三方组件，如elementui组件库，需要在页面中局部引用，不可全局引用。
参考：https://www.cnblogs.com/1285026182YUAN/p/18407622
引用：https://blog.csdn.net/lingliu0824/article/details/125764527
