发布npm组件以及相关配置

77 阅读1分钟

image.png

main: 依赖包入口

private: false 共有 私有包需要收费下载

组件编写

image.png

// package/index.js 遍历注册组件
import lrRuler from "./lr-ruler";
const components = [lrRuler]
const install = function (Vue) {
    // 遍历注册所有的组件
    components.map(com=>{
      Vue.component(com.name,com)
    })
  }
// 注意这里的判断,很重要
if(typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    install,
    // 组件列表
    ...components
}
// package/lr-ruler/index.js export ruler组件
import lrRuler from './index.vue'
lrRuler.install = (Vue)=> {
    Vue.component(lrRuler.name, lrRuler)
}
export default lrRuler
// vue.config.js 

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  productionSourceMap: false,
  transpileDependencies: true,
  lintOnSave: false, //设置是否在开发环境下每次保存代码时都启用 eslint验证
  css: { // css相关配置
    extract:  false, // css样式内联打包
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
    sourceMap: false,
    loaderOptions: {
      less: {
        
      }
    }
  },

});

发布npm run build后 直接npm publish 若未登录 会提示你登录npm