该插件为vue-cli3的cli-plugin插件,依赖vue-cli3运行环境(系统需要安装vue-cli 3.x版本)。
- 创建项目: vue create [project]
- 进入项目根目录: cd [project]
- 安装此插件: vue add multi-page(或者 vue add vue-cli-plugin-multi-page)
新建开发模块使用 npm run add module
本地启动开发模块 npm run serve module
本地构建一个模块 npm run build module
本地构建多个模块 npm run build m1 m2 m3...
本地构建所有模块 npm run build
src // 源码目录
│ ├─assets // 资源目录
│ │ logo.png
│ │
│ ├─components // 公用组件库
│ │ Hello.vue
│ │
│ └─modules // 多模块目录
│ ├─m1 // 模块1 (结构类似vue官方开发目录结构)
│ │ │ App.vue // 根路由页面
│ │ │ index.html // 启动文件
│ │ │ main.js // 根配置文件
│ │ │
│ │ ├─assets // 资源目录
│ │ │ logo.png
│ │ │
│ │ ├─components // 组件目录
│ │ │ Hello.vue
│ │ │
│ │ └─router // 路由目录
│ │ index.js
│ │
│ └─m2 // 模块1 (结构类似vue官方开发目录结构)
│ │ │ App.vue // 根路由页面
│ │ │ index.html // 启动文件
│ │ │ main.js // 根配置文件
│ │ │
│ │ ├─assets // 资源目录
│ │ │ logo.png
│ │ │
│ │ ├─components // 组件目录
│ │ │ Hello.vue
│ │ │
│ │ └─router // 路由目录
│ │ index.js
在插件安装后会自动修改项目目录结构为该插件要求的运行环境(参见要求的项目结构)
注意:目前还不支持自动删除文件操作 (请手动删除src目录下App.vue和main.js) ❌
vue add vue-cli-plugin-multi-page
或者你可以可以这样做
1.列表内容先clone本项目到本地
2.按该插件要求修改项目目录结构
3.在项目package.json文件中引入本插件
4.在本地开发模式中使用npm run add modulue 命令可能会出现找不到vue-cli-plugin-multi-page路径的问题,先使用vue add vue-cli-plugin-multi-page 解决
# pageckage.json { ... ,"vuePlugins": { "service": ["../vue-cli-plugin-multi-page"] } }
npm run add [module]
npm run serve [module]
npm run serve
npm run build [module] [m2] [...]
npm run build