vue组件库从创建到发行和使用

其实很早之前就做过，时间久了，就忘记了。这次复习，做个笔记
官方文档：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93

创建组件项目
用脚手架创建一个普通项目，即可
然后，编写自己的代码

增加打包命令 并 修改项目入口启动文件
因为默认的npm run build打包，并不是构建插件类库模式
在packge.json中，增加如下脚本

 "main": "lib/custom-audio.umd.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib":"vue-cli-service build --target lib --name custom-audio --dest lib ./src/index.ts"
  }

lib命令参数含义如下

• target:默认为构建应用，改为lib即可启用构建库模式
• name:输出文件名
• dist:输出目录，默认为dist，可以修改我们改为lib
• entry:入口文件路径，默认为src/App.vue,我们修改为src/lib/index.js

创建打包入口文件
npm run build的入口文件在src>main.js 我们将其改造为index.js
因为我用的是ts，所以在src下创建index.ts文件，代码如下

import CustomAudio from '@/components/custom-audio/index.vue'; //引入组件

// 定义install方法
const install:any = (Vue: any) => {
  if (install.installed) {
    return false;
  }
  // 遍历并注册组件 切勿写CustomAudio.name
  Vue.component('CustomAudio', CustomAudio);
};
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

// @ts-ignore
CustomAudio.install = install;

export default CustomAudio;

 

打包发版
注册npm账号>进入目录登录npm login>打包npm run lib>发版npm publish
如果不出意外，此次操作就完事了
需要注意的是，这里可以不用将你的代码推送到git hub上，这个步骤是可有可无。
还有就是npm publish的时候，版本号要比上一个大，否则会失败

使用测试
创建一个新项目，yarn add custom-audio 或者 npm install custom-audio
然后在main.js引入注册

import CustomAudio from 'custom-audio'
Vue.use(CustomAudio)

最后在组件中直接使用

<CustomAudio msg="Welcome" />

遇到的问题
1、ts项目生产环境下，引入后，组件无法编译，仍然是自定义标签名（但是js项目或者ts的本地启动没问题）

原因是因为定义install组件的时候，注册的组件名字为compnents.name，编译过程中，组件名字会被压缩成别名，
解决办法，改成字符串，写死即可，完整入口文件如下
index.ts

import CustomAudio from '@/components/custom-audio/index.vue'; //引入组件

// 定义install方法
const install:any = (Vue: any) => {
  if (install.installed) {
    return false;
  }
  // 遍历并注册组件 切勿写CustomAudio.name
  Vue.component('CustomAudio', CustomAudio);
};
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

// @ts-ignore
CustomAudio.install = install;

export default CustomAudio;

 2、编译的时候，样式和图片丢失
引入使用，还需要像三方ui框架一样，单独引入css。
原因分析，默认情况下，css是单独打包的，不混淆在页面上，可以通过配置取消这一特性
图片丢失也是如此。图片的话，让其都变成base64就行了
所以完整的vue.config.js配置如下

module.exports = {
  // 配置webpack，将图片转base64的限制放宽
  chainWebpack: config => {
    config.module
        .rule('images')
        .use('url-loader')
        .loader('url-loader')
        .tap(options => {
          options.limit = 1024*1024
          return options;
        });
  },
  css: {
    extract: false // 绑定css样式
  }
};

推荐目录结构
examples文件夹: 组件库例子，npm run serve和build调用
对应的需要修改默认本地启动配置，
在vue.config.js增加如下代码

// 修改 src 目录 为 examples 目录
  pages: {
    index: {
      entry: 'examples/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
    },
  },

packges文件夹:你的核心组件代码，整个组件库源代码。当然还包括lib命令的的入口文件index.ts
对应的，你需要修改lib命令的入口文件地址，在packge.json中增加如下命令

"lib":"vue-cli-service build --target lib --name JieEcharts --dest lib ./packges/index.ts"

src文件夹:这个目录就不再需要了

lib文件夹: 组件库发行的代码，需要npm publish上传的npm的

dist文件夹：本地测试编译的文件夹，这个是默认的，不用动

.npmignore文件: 组件上传npm时候，忽略文件。比如我不需要上传源代码，配置如下即可

src/

推荐个好用的vue轮播插件：https://github.surmon.me/vue-awesome-swiper/
如果黑屏，引入cdn的css <link rel="stylesheet" href="https://github.surmon.me/_nuxt/4b3c342912bdfb0486a6.css">