使用vuecli3发布npm包

2019-12-05 13:53:27 阅读：230 来源： 互联网

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

标签：npm,vue,lib,vuecli3,js,发布,Vue,组件
来源： https://www.cnblogs.com/jasonwang2y60/p/11382349.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用vuecli3发布npm包