vue发布自定义组件到npm

一、使用 vue create currentdatetime创建项目（可查考https://cli.vuejs.org/zh/guide/creating-a-project.html），创建成功后项目目录结构如下：

二、在项目的根目录新建一个packages文件夹,用于存放需要发布的组件。

三、支持对package目录的处理，在vue.config.js文件中修改配置中的chainWebpack选项。

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
  transpileDependencies: false, // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。
  publicPath: './', // 部署应用包时的基本URL
  outputDir: 'dist', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
  assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  indexPath: 'index.html', // 设置index.html
  filenameHashing: true, // 设置打包生成的静态资源的文件名中是否加入hash以便控制浏览器缓存问题
  productionSourceMap: false, // 设置生产环境的 source map 开启与关闭
  devServer: {
    open: true, // npm run dev启动项目后是否自动打开浏览器
    host: 'localhost', // 匹配本机IP地址(默认是0.0.0.0或localhost)
    port: 8080, // 端口号    ,默认:8080
    hot: true, // 是否开启热更新(局部刷新,不刷新整个页面)
    https: false, // 是否启用https
    compress: true // 是否启动gzip压缩,用于减少服务器向前端传输的数据量,提高浏览的速度
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
    .rule('js')
    .include
    .add(__dirname + 'packages')
    .end()
    .use('babel')
    .loader('babel-loader')
    .tap(options => {
      // 修改它的选项...
      return options
    })
  }
})

四、可参考element-ui的组件结构,在packages目录下新建组件的目录结构。

　　例如需要新建一个组件 currentDate，则在packages下新建 文件夹 currentDate，然后在该目录下新建src/main.vue的文件,用于编写组件信息,在currentDate的目录下建一个index.js用于导出该组件。

五、编写currentDate/index.js文件，对外提供对组件的引用

import CurrentDate from './src/main';

/* istanbul ignore next */
CurrentDate.install = function(Vue) {
  Vue.component(CurrentDate.name, CurrentDate);
};

export default CurrentDate;

六、在packages的目录下,创建一个index.js文件,用于整合所有的组件并对外导出，以便一个完整的组件库。

// 引入该目录下所有的组件
import CurrentDate from "./currentDate/index.js";
import CurrentDateTime from "./currentDateTime/index.js";
import CurrentDateTimeWeek from "./currentDateTimeWeek/index.js";

const components = [
  CurrentDate, CurrentDateTime, CurrentDateTimeWeek
]

const MyModule = {}
MyModule.install = Vue => {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  MyModule.install(window.Vue)
}

export default MyModule

七、可以在项目结构里面引入该组件，以便测试组件的正确性。

　　7.1 在src/main.js中引入并注册该组件:

import Vue from 'vue'
import App from './App.vue'

import MyModule from '../packages/index.js' // 引入组件库
Vue.use(MyModule) // 注册组件库

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

　　7.2 可直接在app.vue中使用组件,以便查看效果:

<template>
  <div id="app">
    <CurrentDate></CurrentDate>
    <CurrentDateTime></CurrentDateTime>
    <CurrentDateTimeWeek></CurrentDateTimeWeek>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

八、发布到npm

　　8.1 修改package.json，在 scripts 下增加一个编辑到库的命令：

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

{
  "name": "currentdatetime", // npm包名称
  "version": "1.0.0", // 版本信息
  "description": "显示当前时间", // 描述信息
  "main": "lib/currentdatetime.umd.min.js", // 入口文件
  "keyword": "currentdatetime currentdate currentdatetimeweek", // 关键字
  "license": "MIT", // 开源协议
  "private": false, // 这个只有设置为 false 才能发布到 npm
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name currentdatetime --dest lib packages/index.js" // 新增的一个npm run lib的命令,运行时会在根目录生成一个lib的文件夹,并把组件编译到该目录下
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

　　8.2 添加 .npmignore 文件，设置忽略发布文件

忽略目录
src/
packages/
public/
 
忽略指定文件
vue.config.js
babel.config.js
*.map

　　8.3 登录到npm，npm账号注册可在官网进行(npm官网)

npm login // 在终端执行登录命令，输入用户名、密码、邮箱即可登录
npm publish // 执行发布命令，发布组件到npm

九、引入并注册发布的组件库