npm 生成vue公共组件

目前公司有个vue的公共组件是很多项目都要使用的，避免每个项目拷贝增加工作量，考虑用npm发布到公司内部packages中

image.png

2. src/index.js

import Questionaire from './views/Healthmanagement/Questionaire.vue' // 我的组件

const components = [
  Questionaire
];

// vue里面通过install挂载组件
const install = function (Vue) {
  components.map((component) => {
    Vue.component(component.name, component);
  });
};
// 这是为了判断是否有vue的环境
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default { install }

3.修改package.json文件

{
  "name": "jk-questionaire", // 包名
  "version": "0.0.4", // 版本 每一次更新需要增加
  "private": false, // 设置 false
  "main": "lib/jk-questionaire.umd.min.js", // 包名的入口文件 npm run lib 之后生成的
  "license": "MIT",
  "scripts": {
    "lib": "vue-cli-service build --target lib --name jk-questionaire --dest lib src/index.js",  // --name 自己的包名  --dest lib  打包入口文件
  },
}

4.直接npm run lib打包，生成的文件结构lib文件夹(只生成js文件发布在npm上)

5. 进行npm发布 (我们公司不能使用github。所有使用的私有库，这里无法展示)
   先登录npm: npm login; 输入你的用户名和密码，邮箱，直到登陆成功。报错的话可以自行百度下
   登陆成功后，npm publish进行发布。
6. 使用包
   通过npm install jk-quesionaire安装包，然后main.js文件

import Vue from "vue";
import App from "./App.vue";
import { router } from "./router/index.js";
import store from "./store/index.js";

import Questionaire from 'jk-questionaire';
import "jk-questionaire/lib/jk-questionaire.css"
Vue.use(Questionaire)
// 引入vant
import "./libs/vantTool";

Vue.config.productionTip = false;

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