[VueCli3]Vue组件如何发布到Npm-CFANZ编程社区

使用VUE-CLI3方式开发组件

第一步：创建项目并编写myToast组件

开始编写一个 toast 组件

myToast.vue

创建一个目录myToast，先编写组件内容，具体代码如下：

<template>
  <transition name="alert-fade">
    <div id="toast"
         v-show="visible"
         class="dialog-tips dialog-center">
      {{message}}
    </div>
  </transition>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      message: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.alert-fade-enter-active,
.alert-fade-leave-active {
  transition: opacity 0.3s;
}
.alert-fade-enter,
.alert-fade-leave-to {
  opacity: 0;
}
.dialog-tips {
  position: fixed;
  z-index: 100;
  min-width: 100px;
  padding: 15px;
  border-radius: 15px;
  white-space: nowrap;
  background-color: rgba(0,0,0,1);
  box-shadow: 0px 8px 30px 0 rgba(0, 0, 0, 0.363);
  text-align: center;
  color: #fff;
  font-size: 15px
}
.dialog-center {
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

index.js
接着编写组件入口文件index.js

import myToast from './myToast.vue'
const toast = {}
toast.install = Vue => {
    // 扩展 vue 插件
    const ToastCon = Vue.extend(myToast)
    const ins = new ToastCon()
    // 挂载 dom
    ins.$mount(document.createElement('div'))
    // 添加到 body 后面
    document.body.appendChild(ins.$el)
    // 给 vue 原型添加 toast 方法
    Vue.prototype.$toast = (msg, duration = 3000) => {
        // 我们调用的时候 赋值 message
        // 将 visible 设置为 true
        // 默认 3s 之后 设置 为 false 关闭 toast
        ins.message = msg
        ins.visible = true
        setTimeout(() => {
            ins.visible = false
        }, duration)
    }
}
export default toast

在该组件中，需要先引入之前的组件文件，并编写插件需要的install方法，在方法中添加$toast方法到vue实例对象上，这样在所有vue实例中都可以调用了。

组件引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import toast from './components/myToast'
Vue.use(toast)

Vue.config.productionTip = false

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

组件使用
打开views/Home.vue文件，引入全局组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <button v-on:click="greet">Greet</button>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  methods: {
    greet(){
        this.$toast('my toast test!')
    }
  }
}
</script>

效果如下：

第二步：重构项目 for component build

创建一个项目，之后将 src 目录改成 examples 这样会导致项目跑不起来，为啥是因为 vue-cli3 内置配置了自动回去找 src 文件夹，然后再新建一个 packages 文件夹，这样就把目录准备好了，如图所示

下面解决项目跑不起来的问题，主要在 vue.config.js 配置项目的入口文件

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  // 修改 src 为 examples
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  },
  // 组件样式内联
  css: {
    extract: false
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('examples'))
      .set('~', resolve('packages'))
    config.module
      .rule('eslint')
      .exclude.add(path.resolve('lib'))
      .end()
      .exclude.add(path.resolve('examples/docs'))
      .end()
      
    config.module
      .rule('js')
      .include
      .add('/packages/')
      .end()
      .include.add(/examples/)
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
};

注意：这里可以不用把src改名，上面的配置也只需要css内联处理，如下：

// 组件样式内联
  css: {
    extract: false
  }

第三步：配置 package.json

主要是配置包导出入口 main，还有打包成 lib

{
  "name": "big-bear-toast",
  "version": "0.1.0",
  "main": "packages/myToast/index.js",
  "scripts": {
    "lib": "vue-cli-service build --target lib --name toast --dest lib packages/myToast/index.js",
    "serve": "vue-cli-service serve --hot",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "node-sass": "^6.0.0",
    "sass-loader": "^10.2.0",
    "vue-template-compiler": "^2.6.11"
  }
}

vue-cli-service build

Options:

--mode 指定环境模式 (default: production)

--dest 指定输出目录 (default: dist)

--modern 构建两个版本的 js 包：一个面向支持现代浏览器的原生 ES2015+ 包，以及一个针对其他旧浏览器的包。

--target 允许您以项目库或Web组件的形式在项目内部构建任何组件 app | lib | wc | wc-async (default: app) ???

--name lib或者web组件库的名称 (default: "name" in package.json or entry filename)

--no-clean 在构建项目之前不要删除输出目录(dist)

--report 生成report.html以帮助分析包内容

--report-json 生成report.json来帮助分析包内容

--watch 监听 - 当有改变时自动重新打包~