Vue 组件库开发

开发流程

1.开发Vue组件页面；

不需要安装Vue，只使用template格式开发即可；

使用Element或者iView组件，也无需安装到组件库中。

<template>
  <div>This is a rollup vue and {{ vueTest }}</div>
</template>

<script>
export default {
  name: "vue-test",
  data() {
    return {
      vueTest: "vue rollup",
    };
  },
};
</script>

2.install 方法添加插件 Vue.component()；

import VueTest from "./VueTest.vue";

VueTest.install = function(app) {
  app.component("VueTest", VueTest);
};

export default VueTest;

3.定义组件库并输出；

import VueTest from "./test";

const components = [VueTest];

const install = app => {
  if (install.installed) return;
  components.forEach(component => {
    app.component(component.name, component);
  });
};

if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

const myUI= {
  version,
  install
};

export { VueTest };

export default myUI;

4.rollup 打包；

rollup -c

编写 rollup.config.js

5.测试；

6.发布；

上传到GitHub

发布到npm

注册npm账号->验证邮箱->确认包名是否有重名->每次publish需要更改版本号

创建 publish.sh 文档，运行 sh 文件，执行发布命令

1）.先将 npm config 的 registry 改到官方地址；2）.登录，输入用户名、密码和邮箱；3）.发布publish；4）.修改 registry 到淘宝镜像，方便平时使用；

npm config get registry # 检查仓库镜像库
npm config set registry=http://registry.npmjs.org
echo '请进行登录相关操作：'
npm login # 登陆
echo "-------publishing-------"
npm publish # 发布
npm config set registry=https://registry.npm.taobao.org # 设置为淘宝镜像
echo "发布完成"
exit

publish 的时候报错，检查下npm注册的邮箱是否通过验证，上传的包名是否有重名。

使用

  • html加载方式

加载

<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
//加载vue和iview的js后，再加载组件包
<script src="../dist/vue-iview-ui.js"></script>

调用组件

 <script>
        const { VueTest } = MyUI
        var app = new Vue({
            el: '#app',
            components: { VueTest }
        })
 </script>

使用

 <vue-test></vue-test>
  • 单页面应用调用方式

main.js 调用后设置成公共组件

import Vue from "vue";
import iView from "iview";
import App from "./App.vue";
import { VueTest } from "../../../dist/iview-ui.cjs";
import "iview/dist/styles/iview.css";

Vue.use(iView);
Vue.use(VueTest);

App.vue直接使用

<vue-test></vue-test>
  • 单页面调用遇到的问题：
  1. vue项目会自动执行eslint，会报错 no-undef， no-unused-vars

设置package.json

 "rules": {
      "no-unused-vars": "warn",
      "no-undef": "warn"
  }