使用vuecli3发布npm包

时间：2024-02-01 20:22:54

 一.使用vuecli3创建项目

vue create svgicon

二.修改目录，开发组件前的准备

把src目录改为examples作为查看组件的演示目录，新建packages目录作为组件编写的目录。

在packages下新建index.js作为导出组件入口，作为整个组件库的导出，新建组件文件夹作为组件源码的放置，比如我的组件目录叫做 svg-icon ，在svg-icon文件夹下新建index.js文件对外提供对文件的引用，新建src文件夹并创建svg-icon.vue作为组件文件。整个packages文件夹下是如下的样子：

在项目根目录下新建vue.config.js并添加如下修改 src 目录 为 examples 目录

module.exports = {
  // 修改 src 目录 为 examples 目录
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  }
}

三.编写组件 

<template>
  <dir>一个新的svg-icon组件</dir>
</template>

在packages/svg-icon/index.js导出组件

// 导入组件，组件必须声明 name
import SvgIcon from './src/svg-icon.vue'

// 为组件提供 install 安装方法，供按需引入
SvgIcon.install = function (Vue) {
  Vue.component(SvgIcon.name, SvgIcon)
}

// 默认导出组件
export default SvgIcon

在packages/index,js 整合所有的组件，对外导出，即一个完整的组件库

// 导入颜色选择器组件
import SvgIcon from './svg-icon'

// 存储组件列表
const components = [
  SvgIcon
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  SvgIcon
}

四.编写示例

在 examples/main.js中引入写好的组件

import Vue from 'vue'
import App from './App.vue'
// 导入组件库
import SvgIcon from './../packages/index'
// 注册组件库
Vue.use(SvgIcon)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

在示例中 examples文件夹下 使用组件库中的组件，在上一步用使用 Vue.use() 全局注册后，即可在任意页面直接使用了，而不需另外引入。当然也可以按需引入。

<template>
  <div id="app">
    <svg-icon icon-class="Abook" />
  </div>
</template>

<script>

export default {
  name: 'app',
}
</script>

五.发布前的准备

在根目录添加 .npmignore 文件，设置忽略发布文件。我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

package.js 中新增一条编译为库的命令，vuecli3提供了一个构建目标库的命令，可以查看官方文档详细了解：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93

vue-cli-service build --target lib --name myLib [entry]
  • --target : 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
  • --dest : 输出目录，默认 dist 。这里我们改成 lib
  • [entry] : 最后一个参数为入口文件，默认为 src/App.vue 。这里我们指定编译 packages/ 组件库目录。

这里我添加的是： 

...
"scripts": {
    ...
    "lib": "vue-cli-service build --target lib --name vue-svgicon-coms --dest lib packages/index.js",
   ... 
  },
...

　并在package.json中添加npm包的一些详细信息,仅供参考：

  "name": "vue-svgicon-coms",
  "version": "1.0.1",
  "author": "jason",
  "description": "vue-svg-components",
  "main": "lib/vue-svgicon-coms.umd.min.js",
  "keyword": "vue svg icon",
  "license": "MIT",
  "private": false

　　执行编译：

npm run lib

　然后可以看到编译成功：

　　

项目的根目录也多了一个lib文件夹

六.注册npm账号

如果之前修改过npm源为淘宝镜像，先改回为npm镜像

npm config set registry http://registry.npmjs.org

使用npm账号登录

npm login

如果还没有npm账号，使用新建npm账号

使用  npm adduser 命令创建 npm 账号，会提示输入用户名/密码/邮箱

然后在浏览器注册时使用的邮箱，点击注册链接完成邮箱认证。

执行发布命令，发布组件到 npm

 npm publish

 七.发布成功

发布成功后稍等几分钟，即可在 npm 官网搜索到。以下是刚提交的 vue-svgicon-coms

 

八.更新npm包

每次修改完组件后，我们需要修改 package.json 的version版本

规则：对于"version":"x.y.z"
1.修复bug,小改动，增加z
2.增加了新特性，但仍能向后兼容，增加y
3.有很大的改动，无法向后兼容,增加x
 
然后重新打包并上传npm
npm run lib
npm public

 也可以使用命令修改版本:

使用命令：npm version <update_type>进行修改，update_type 有三个参数，

第一个是patch, 第二个是minor,第三个是 major，

patch：这个是补丁的意思；

minor：这个是小修小改；

major：这个是大改动；


具体咋用：

比如我想来个1.0.1版本，注意，是最后一位修改了增1，那么命令：npm version patch 回车就可以了；

比如我想来个1.1.0版本，注意，是第二位修改了增1，那么命令： npm version minor 回车就可以了；

比如我想来个2.0.0版本，注意，是第一位修改了增1，那么命令： npm version major 回车就可以了；

然后 使用 npm publish 发布即可
 
 
 

相关文章