vue cli3发布组件到npm上

最新推荐文章于 2024-05-11 18:05:32 发布

hainandetong

最新推荐文章于 2024-05-11 18:05:32 发布

阅读量163

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/chaogaoxiaojifantong/article/details/103416826

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

组件内的内容

<template>
    <div :class="classes">
        <button :class="buttonClasses" @click="goClick" :style="buttonStyle"><slot></slot></button>
    </div>
</template>
<script>
const cssPrefix = "ft-button";
export default {
  name: "ftButton",
  props: {
    backgroundColor: {
      //按钮颜色
      type: String,
      default: "#1eaa81"
    },
    width: {
      type: String,
      default: "315px"
    },
    height:{
        type: String,
        default: "45px"
    },
    color:{
         type: String,
        default: "white"
    },
     borderRadius:{
      type: String,
      default: "5px"
    },
    borderWidth:{
       type: String,
       default: "0px"
    },
  },
  methods: {
      goClick(){
           this.$emit("click");
      }
  },
  computed: {
      classes(){
          return cssPrefix;
      },
      buttonClasses(){
           return cssPrefix+'-bu';
      },
      buttonStyle(){
          return {backgroundColor:this.backgroundColor,width:this.width,height:this.height,color:this.color,borderRadius:this.borderRadius,borderWidth:this.borderWidth}
      }
  },
}
</script>
<style lang="less" scoped>
@import url("../style/ft-button.less");
</style>

组件的index.js文件

import ftTopBar from './component/ft-top-bar.vue'
import ftInput from './component/ft-input.vue'
import ftButton from './component/ft-button.vue'
const ftComponents = [
    ftTopBar,
    ftInput,
    ftButton
]
const install = function(Vue, opts = {}) {
  ftComponents.map(component => {
      Vue.component(component.name, component);
    })
  }

  /* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  install,
  ftTopBar,
  ftInput,
  ftButton
}

vue.config.js文件

const path = require("path");
const resolve = dir => {
  return path.join(__dirname, dir);
};
const BASE_URL = process.env.NODE_ENV === "production" ? "/" : "/";
module.exports = {
  publicPath: BASE_URL,
  pages: {
    index: {
      entry: process.env.NODE_ENV == 'development' ? './src/main.ts' : './src/components/index.js',//重点
    }
  },
  chainWebpack: config => {//重点
    config.resolve.alias
      .set("@", resolve("src"))
      .set("_c", resolve("src/components"));
    config.output.filename('ftui.js');
    config.output.library('ftui');
    config.output.libraryTarget('umd');
    config.output.umdNamedDefine(true);
  },
  // 打包时不生成.map文件
  productionSourceMap: true,
  devServer: {   
    disableHostCheck: true,
    port: 8071
  }
};

package.json

  "name": "ftui",//名字将决定安装时import什么
  "version": "0.1.8",
  "main": "dist/ftui.common.js",
    "scripts": {
    "build-bundle": "vue-cli-service build --target lib --name ftui ./src/components/index.js"
  },

最后
npm run build-bundle
npm login // 登陆
npm publish // 发布
就发布上去了
也可
npm install ftui
import ftui from ‘ftui’
Vue.use(ftui)
代码开源，直接看就行