发布⼀个独⽴的vue-cli3项⽬到npm以插件的⽅式集成进项⽬（前端微服务）⽬录
1. 前端微服务
2. 创建⼀个简单的vue项⽬
3. 改造项⽬
4. 新建⼀个发布的配置⽂件publish.js
5. 打包
6. 使⽤
7. 维护
1.前端微服务
所谓的前端微服务其核⼼就是集成，将多个不同的应⽤集成到⼀个主应⽤中，他们之间互不影响，独⽴开发。保鲜
由此，在我们平常的项⽬管理中，项⽬会⽐较繁多，可以采⽤这种插件式的管理，将各个单独的模块打包发布到npm 或者私服（最好是私服安全），然后在主项⽬中 以插件的形式集成进来
注意：下⾯说的是⽤vue-cli3来创建的项⽬发布，如果是之前的版本，可以参考我上两篇，来配置webpack 打包发布，下⾯⽤vue-cli提供的库打包
2.创建⼀个简单的vue项⽬
这⾥怎么创建 就不说了，就是最基础的项⽬，下⾯的⽬录是我加过⼀些东西了不⽤管，就原始的项⽬结构就⾏
3.改造项⽬
注意：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: "/urList",
name: "urList",
丈夫英文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.u(Router);
Vue.u(Vuex);
// 实例化路由
let router = new Router({
routes: routerList
});
// 实例化vuex
let storeModules ={
modules: {}
};
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: "urlist-Vuex-name"
},
mutations: {},
actions: {}
};
改造之后运⾏下项⽬跑起来没问题就⾏
4.新建⼀个发布的配置⽂件publish.js
config是每个项⽬的单独配置，配啥都⾏，我这下⾯就配置了⼀个vuex的module名publish.js输⼊我们主项⽬需要的东西
export default {
vuexName: "urlist" //项⽬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":"urlistyj", //项⽬名
"main":"lib/urlistyj.umd.min.js", //打包之后的⼊⼝⽂件
"version":"1.1.8", //版本号
"private": fal,
"scripts":{
"rve":"vue-cli-rvice rve",
"build":"vue-cli-rvice build",
"lint":"vue-cli-rvice lint",
"lib":"vue-cli-rvice build --target lib --name urlistyj --dest lib publish.js" //打包库命令项⽬民输⼊的⽂件夹名 publish⼊⼝⽂件
},
"dependencies":{
"core-js":"^2.6.5",
山羊角的功效与作用
"vue":"^2.6.10",
"vue-router":"^3.0.3",
"vuex":"^3.0.1"
saw的过去式},
"devDependencies":{
"@vue/cli-plugin-babel":"^3.0.4",
"@vue/cli-plugin-eslint":"^3.0.4",
"@vue/cli-rvice":"^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/
# ⽂件
.browrslistrc
.editorconfig
.
eslintrc.js
.gitignore
发布成功
6.使⽤
vue主项⽬中 npm i 下载 然后引⼊
注意：这⾥需要做处理
1.路由需要混⼊，跟主项⽬合并
2.vuex也需要合并
main.js 改造的路由和vuex跟上⾯说的⼀样 主项⽬也建⼀个config，js
