手把手教你发布一个vue组件到npm上

最近公司项目比较多,不同的项目中公用的组件,如何避免因为一个需求的变动,造成所有项目都要拿过来修改,我们想到把公共的部分抽取出来做为一个组件,常见的组件模式有:

npm

本文章介绍 登录组件 如何从0开始创建一个 vue 组件发布到 npm 上 本项目案例

一、依赖环境

node
vue-cli

二、使用 vue-cli 构建一个项目及基本配置

• 1、创建一个基本的项目

  vue init webpack-simple maucash(项目名)
  复制代码

• 2、项目的基本结构

  

• 3、本项目是基于 iview 的基础上,需要根据官网的方式安装与配置 iview 连接地址

三、本地调试

• 1、在 App.vue 中直接引入本地的组件

  import maucashLogin from "./packages/maucash-login/maucash-login";
  复制代码

• 2、 maucash-login 组件和我们本地写一般的 vue 组件一样的,附加组件之间的通讯

四、本地组件测试没问题,改造成 vue 插件类型的

• 1、在组件的文件夹下创建一个 index.js 文件

  // 引入组件
  import MaucashLogin from './maucash-login'
  
  MaucashLogin.install = Vue => Vue.component(MaucashLogin.name, MaucashLogin);
  
  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(MaucashLogin);
  }
  
  export default MaucashLogin
  复制代码

• 2、在与 packages 同级下创建一个 index.js 的文件(一个包下可能有多个组件)

  import Maucash from './packages/maucash-login/index.js';
  
  const components = [
    Maucash,
  ]
  
  const install = function(Vue, opts = {}) {
    components.map(component => {
      Vue.component(component.name, component);
    })
  }
  
  /* 支持使用标签的方式引入 */
  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
  }
  
  export default {
    install,
    Maucash,
  }
  复制代码

五、修改配置文件

• 1、修改 package.json 文件

  {
    "name": "maucash",
    "description": "maucash中常用组件抽取",
    "version": "1.0.2",
    "author": "kuangshp <kuangshp@126.com>",
    // 开源协议
    "license": "MIT",
    // 因为组件包是公用的，所以private为false
    "private": false,
    // 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径
    "main": "dist/maucash.js",
    "scripts": {
      "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
      "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
    },
    "dependencies": {
      "axios": "^0.18.0",
      "iview": "^2.14.1",
      "style-loader": "^0.23.1",
      "url-loader": "^1.1.2",
      "vue": "^2.5.11"
    },
    // 指定代码所在的仓库地址
    "repository": {
      "type": "git",
      "url": "git+git@git.wolaidai.com:maucash/maucash.git"
    },
    // 指定打包后,包中存在的文件夹
    "files": [
      "dist",
      "src"
    ],
    // 指定关键词
    "keywords": [
      "vue",
      "maucash",
      "code",
      "maucash code"
    ],
    // 项目官网的地址
    "homepage": "https://github.com/kuangshp/maucash",
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
    ],
    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-plugin-transform-runtime": "^6.23.0",
      "babel-preset-env": "^1.6.0",
      "babel-preset-stage-3": "^6.24.1",
      "cross-env": "^5.0.5",
      "css-loader": "^0.28.7",
      "file-loader": "^1.1.4",
      "node-sass": "^4.5.3",
      "sass-loader": "^6.0.6",
      "vue-loader": "^13.0.5",
      "vue-template-compiler": "^2.4.4",
      "webpack": "^3.6.0",
      "webpack-dev-server": "^2.9.1"
    }
  }
  复制代码

• 2、修改 .gitignore 文件

  因为要用 dist 文件夹，所以在 .gitignore 文件中把 dist/ 去掉。

• 3、修改 webpack.config.js 文件

  var path = require('path')
  var webpack = require('webpack')
  const NODE_ENV = process.env.NODE_ENV;
  
  module.exports = {
    entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      filename: 'maucash.js',
      library: 'maucash',
      libraryTarget: 'umd',
      umdNamedDefine: true
    },
    ...
  }  
  复制代码