发布 一个独立的vue-cli3项目 到npm 以插件的方式集成进项目（前端微服务）

目录

1. 前端微服务
2. 创建一个简单的vue项目
3. 改造项目
4. 新建一个发布的配置文件publish.js
5. 打包
6. 使用
7. 维护

1.前端微服务
所谓的前端微服务其核心就是集成，将多个不同的应用集成到一个主应用中，他们之间互不影响，独立开发。
由此，在我们平常的项目管理中，项目会比较繁多，可以采用这种插件式的管理，将各个单独的模块打包发布到npm 或者私服（最好是私服安全），然后在主项目中 以插件的形式集成进来

注意：下面说的是用vue-cli3来创建的项目发布，如果是之前的版本，可以参考我上两篇，来配置webpack 打包发布，下面用vue-cli提供的库打包

2.创建一个简单的vue项目
这里怎么创建 就不说了，就是最基础的项目，下面的目录是我加过一些东西了不用管，就原始的项目结构就行

3.改造项目

1.router改造, 现项目中路由是在router.js中直接实例化了我们改造下
注意：1.不能使用懒加载。2.输出一个数组。3.在main。js中去实例化（当然这个你可以另外建一个文件处理也是可以的）

router.js
import home from "./views/home.vue";
import menList from "./views/menList.vue";
import womenList from "./views/womenList.vue";
import womenListDetail from "./views/womenListDetail.vue";
let router = [
    {
        path: "/userList",
        name: "userList",
        component: home
    },
    {
        path: "/womenList",
        name: "womenList",
        component: womenList
    },
    {
        path: "/menList",
        name: "menList",
        component: menList
    },
    {
        path: "/womenListDetail",
        name: "womenListDetail",
        component: womenListDetail
    }
];
export default router;

main.js 注意new Vue中router 和 store 这名字别写错，写成其他的会报错，

main.js
import Vue from "vue";
import routerList from "./router";
import storeObj from "./store";
import Vuex from "vuex";
import Router from "vue-router";
import App from "./App.vue";
import config from "./config";
Vue.use(Router);
Vue.use(Vuex);

// 实例化路由
let router = new Router({
    routes: routerList
});

// 实例化vuex
let storeModules = {
    modules: {}
};
storeModules.modules[config.vuexName] = storeObj;
let store = new Vuex.Store(storeModules);

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

VUEX的处理相同，main.js就是上面的，这里因为是考虑多项目集成，所以vuex采用modules 模块化

export default {
    state: {
        name: "userlist-Vuex-name"
    },
    mutations: {},
    actions: {}
};

改造之后运行下项目跑起来没问题就行

4.新建一个发布的配置文件publish.js

config是每个项目的单独配置，配啥都行，我这下面就配置了一个vuex的module名
publish.js输入我们主项目需要的东西

export default {
    vuexName: "userlist" //项目vuex的module名
};

publish.js

import router from "./src/router";
import store from "./src/store";
import config from "./src/config";

export default {
    router,
    store,
    config
};

5.打包

vue-cli3 提供了打包库的命令
配置package.json

{
    "name": "userlistyj",		//项目名
    "main": "lib/userlistyj.umd.min.js",	//打包之后的入口文件
    "version": "1.1.8",					//版本号
    "private": false,					
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "lib": "vue-cli-service build --target lib --name userlistyj --dest lib  publish.js"	//打包库命令
        													项目民			输入的文件夹名		 publish入口文件
    },
    "dependencies": {
        "core-js": "^2.6.5",
        "vue": "^2.6.10",
        "vue-router": "^3.0.3",
        "vuex": "^3.0.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.0.4",
        "@vue/cli-plugin-eslint": "^3.0.4",
        "@vue/cli-service": "^3.0.4",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.16.0",
        "eslint-plugin-vue": "^5.0.0",
        "vue-template-compiler": "^2.6.10"
    }
}

配置忽略文件.npmignore

# 文件夹
/node_modules/
/.vscode/
/public/
/src/

# 文件
vue.config.js
.browserslistrc
.editorconfig
postcss.config.js
.eslintrc.js
.gitignore
babel.config.js
postcss.config.js

发布成功

6.使用

vue主项目中 npm i 下载 然后引入

注意：这里需要做处理
1.路由需要混入，跟主项目合并
2.vuex也需要合并

main.js 改造的路由和vuex跟上面说的一样 主项目也建一个config，js

import Vue from "vue";
import App from "./App.vue";
import routerList from "./router";
import storeObj from "./store";
import config from "./config";
import * as my_func_yyy from "my_func_yyy";
import ceshi_uiui from "ceshi_uiui";
import userlistyj from "userlistyj";
import Vuex from "vuex";
import Router from "vue-router";
Vue.use(Router);
Vue.use(Vuex);
Vue.use(ceshi_uiui);
console.log(userlistyj);

// 混入路由
let modules = [
	//主项目
    {
        config: config,
        store: storeObj,
        router: routerList
    },
    //引入的
    userlistyj
];
let moduleRouter = modules.reduce((a, b) => {
    return a.router.concat(b.router);
});
let router = new Router({
    routes: moduleRouter
});

// 混入vuex
let storeModules = {
    modules: {}
};
modules.map(item => {
    storeModules.modules[item.config.vuexName] = item.store;
});
let store = new Vuex.Store(storeModules);

// 插件方法引入
Vue.prototype.my_func = my_func_yyy;
Vue.config.productionTip = false;

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

然后就可以直接使用了

7.更新维护

之后只需要维护好版本号，每次发布更新插件就行了