F-loat / Mpvue Entry
Licence: mit
⛓️ 集中式页面配置,统一构建入口,支持新增页面热更新
Stars: ✭ 348
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Mpvue Entry
Electron React Boilerplate
A Foundation for Scalable Cross-Platform Apps
Stars: ✭ 18,727 (+5281.32%)
Mutual labels: webpack
Csslayout
This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.
Stars: ✭ 4,832 (+1288.51%)
Mutual labels: webpack
Typescript Plugin Styled Components
TypeScript transformer for improving the debugging experience of styled-components
Stars: ✭ 330 (-5.17%)
Mutual labels: webpack
Wolfbot
Crypto currency trading bot written in TypeScript for NodeJS
Stars: ✭ 335 (-3.74%)
Mutual labels: webpack
Symfony React Sandbox
Example of integration with React and Webpack (Webpack Encore) for universal (isomorphic) React rendering, using Limenius/ReactBundle and Limenius/LiformBundle
Stars: ✭ 325 (-6.61%)
Mutual labels: webpack
React Webpack Boilerplate
Minimalistic ES6+ React boilerplate with Hot Reloading using Webpack 4 and Babel 7
Stars: ✭ 336 (-3.45%)
Mutual labels: webpack
Statoscope
Analyzes webpack stats and shows detailed info about it on the screen.
Stars: ✭ 322 (-7.47%)
Mutual labels: webpack
Personal Site
My personal website - built with React, React-Router, React-Snap for Static-Export, and GitHub Pages.
Stars: ✭ 324 (-6.9%)
Mutual labels: webpack
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (-2.59%)
Mutual labels: webpack
Piptool
Add the Picture-in-Picture Functionality to YouTube, Netflix, Plex and other video broadcasting services in macOS Sierra
Stars: ✭ 337 (-3.16%)
Mutual labels: webpack
Woo Next
🚀 React WooCommerce theme, built with Next JS, Webpack, Babel, Node, Express, using GraphQL and Apollo Client
Stars: ✭ 342 (-1.72%)
Mutual labels: webpack
mpvue-entry
自动生成构建入口,避免编写大量重复的 main.js 文件
目录结构
├─build
├─config
├─src
│ ├─components
│ ├─pages
│ │ └─news
│ │ │─list.vue
│ │ └─detail.vue
│ ├─App.vue
│ ├─app.json
│ └─main.js
└─package.json
Quickstart
vue init F-loat/mpvue-quickstart my-project
安装
npm i [email protected] -D
使用
v2.0 版本仅支持 [email protected]^1.1.0,兼容 megalo
// webpack.base.conf.js
const MpvueEntry = require('mpvue-entry')
module.exports = {
entry: MpvueEntry.getEntry('src/app.json'),
...
plugins: [
new MpvueEntry(),
...
]
}
// app.json - 支持 js 格式,兼容微信小程序官方配置规范
{
"pages": [
{
"path": "pages/news/list", // 页面路径,同时是 vue 文件相对于 src 的路径,必填
"config": { // 页面配置,即 page.json 的内容,可选
"navigationBarTitleText": "文章列表",
"enablePullDownRefresh": true
}
}
],
"window": {}
}
参数
- paths:
String/Object
paths 为
String
类型时作为 config 的值,为绝对路径或相对于项目根目录的相对路径
property | default | describe |
---|---|---|
config | 'src/app.json' | 项目配置文件 |
main | 'src/main.js' | 主入口文件,作为模板 |
template | 'src/main.js' | 入口模板文件,优先级较高 |
entry | 'mpvue-entry/dist/' | 各页面入口文件目录 |
// 示例
MpvueEntry.getEntry({
config: 'src/app.js',
main: 'src/index.js'
})
- pages
[String/Object]
pages 元素为
String
类型时作为 path 的值,为绝对路径或相对于项目根目录的相对路径
property | type | default | describe |
---|---|---|---|
path | String | - | 文件路径 |
config | Object | {} | 页面配置 |
route | String | - | 页面路由 |
native | Boolean | false | 原生页面 |
subPackage | Boolean | false | 分包加载 |
root | String | - | 分包根路径 |
name | String | root |
分包别名 |
independent | Boolean | false | 独立分包 |
// 示例
[
'pages/index',
{
path: 'pages/news/list',
config: {
navigationBarTitleText: '页面标题'
},
route: 'pages/news/list/main'
},
{
path: 'package/news/detail',
root: 'package/news',
subPackage: true,
independent: true
}
]
Tips
-
首页为
pages
数组的第一项 -
分包配置兼容微信小程序官方写法
-
paths 的相关配置均可在项目 package.json 的 entryOptions 中覆盖
-
可通过以下形式的注释指定
main.js
特有代码
console.log('hello world') // app-only
/* app-only-begin */
console.log('happy')
console.log('coding')
/* app-only-end */
- 官方模板生成的项目请务必去除以下配置
// webpack.base.conf.js
module.exports = {
plugins: [
new CopyWebpackPlugin([{
from: '**/*.json',
to: ''
}], {
context: 'src/'
}),
...
]
}
- megalo 官方已对打包入口做了类似的优化,如无迁移需求可直接采用官方方案
Thanks
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].