vue-cli 开发插件并发布到 npm

一.首先用 vue-cli 生成项目

$ vue create 插件名

根据自己需求创建项目目录

… |-- examples // 用作开发测试和示例展示 |-- lib // 用于编写存放组件 …

二.配置修改

1.重新配置入口文件,修改 vue.config.js,把入口改成存放示例的路径

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

三.开发自己的组件

1.写法和自己平时写组件一样,存放在lib文件夹下(根据自己的需求和习惯可自定义)

2.在同级增加 index.js 对外提供组件的引用

import clickOutside from './main.vue'

// 为组件添加 install 方法，用于按需引入
clickOutside.install = function (Vue) {
  Vue.component(clickOutside.name, clickOutside)
}

export default clickOutside

添加 install 方法使得插件可以直接使用 Vue.use()全局注册

四.发布

1.注册 npm 账号方法(两种)

• ​ 在命令行 npm adduser,依次输入 Username、Password、Email 完成注册

• npm 官网注册

  2.登录账号

npm login 或者 yarn login

3.用库模式打包组件

以下我们在 scripts 中新增一条命令 npm run lib

–target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。 –dest : 输出目录，默认 dist。这里我们改成 lib [entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。 “scripts”: { // … “lib”: “vue-cli-service build --target lib --name vue-click-outside --dest dist lib/index.js” } 执行编译库命令

$ npm run lib

4. 配置 package.json

{
  "name": "@ze-ui/vue-click-outside",
  "version": "0.1.0",
  "main": "dist/vue-click-outside.umd.min.js",
  "keyword": "vue-click-outside click-outside",
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name vue-click-outside --dest dist lib/index.js"
  },
  .....
 }

5.设置忽略文件(指定不提交到 npm 的文件,按需操作)

node_modules/
examples/
vue.config.js
babel.config.js
.editorconfig

# 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?

6. 发布到 npm

   $ npm publish
   or
   $ yarn publish

如果没报错就完成了,如果有问题再找我

顺便贴上开发示例地址:https://github.com/luozejian/vue-click-outside