使用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 发布即可