APP demo download address
preface
Multiple pages are used for simpler pages, because simple pages are too cumbersome to use the Router. This scaffold was developed for such a scenario.
Scaffolding with Hbuilder can also be used to quickly develop Android and IOS apps using VUE.
The main features of this paper:
- webpack4
- Multiple page
- Cross-domain Proxy Proxy
- VConsole mobile debugging, mobile developer tools
- Es6 / es7 Babel translation
The project addressGitHub
The manual
MogoH5+ is a vue multi-page scaffolding tool, combining with H5+ can quickly develop Android and Apple apps.
This scaffold can be used as a reference project for multi-page web generation even if it is not suitable for Hbuilder packaging as an APP.
features
Support Npm ecology
Support for VUE syntax, as well as vUE ecology, such as Vux, Mint,vant
ES6/ES7 syntax is supported
Debug using VConsole
VSCode friendly
LAN easy debugging
Compatible with partial MUI syntax
These features are not really new, they just don’t work in Hbuilder alone.
Quick learning
Download the project directly and customize the package according to the demand, and finally generate APP through Hbuilder cloud package.
This article includes an example of several interfaces developed using VantUI, which can be replaced with other UI if you prefer.
Install the module NPM I // or YARN // 2. NPM start // change manifest.json's 'page entry' to http://your_ip:8082/ // 3. Package the NPM run buildCopy the code
use
How to use MogoH5+ to do formal development, in the development process must follow the directory rules, otherwise there will be unexpected errors.
The directory structure
.├ ─ docs // Document ├─ index.html // Import Template ├─ manifest.json // hBuilder Import File ├─ SRC │ ├─.html Components / / component folder │ │ └ ─ ─ the List. The vue / / component │ ├ ─ ─ index. The js / / home page entry documents │ ├ ─ ─ index. The vue / / homepage vue file │ ├ ─ ─ page / / page │ └ ─ ─ utils / / tools ├ ─ ─ unpackage / / hbuilder build directory │ └ ─ ─ res └ ─ ─ webpack. Config. Js / / webpack configuration directoryCopy the code
A new page
/ SRC /page/goods create list.js and list.vue. List. js is a multi-page entry, and list.vue comes with several pages for reference.
Following the relative path rule, this is./goods/list.html if you visit this page from SRC!! The suffix must be.html
The new component
/ SRC/Components. If there are many components, create their own directories. For example, the Logo component used in the demo can be used as a reference.
Creating a Tool Library
/ SRC /utils mainly contains some common functions, such as request, open webview, pay, share, etc. Demo encapsulates some functions from MUI, such as custom events, webView. These functions serve as a reference.
'common.js' is the single JS that needs to be loaded on every page, with' fastclick 'and' vconsole 'in it. / SRC /utils' does this./ SRC /utils' does thisaliasThe 'import common from' alias can be loaded directly like this"Utils/common"`.
Copy the code
Send the request
Request library
Demo requests use AXIos, and again you can wrap whatever library you like.
The common request libraries have the fetch, request, SuperAgent, jquery – ajax.
Cross domain
Because after NPM start, the debug web page is hung on the LAN and serves as the page entry to the Hbuilder, cross-domain can occur when requested.
Use the local proxy in./build.js and change the following https://api.douban.com to your own business domain name.
proxy: {
"/api": {
name:"DOUBANAPI".// Use your own name
target: "https://api.douban.com".pathRewrite: { "^/api": "" },
changeOrigin: true.secure: false
},
"/baidu_api": {
name:"BAIDUAPI".// Use your own name
target: "https://api.baidu.com".pathRewrite: { "^/api": "" },
changeOrigin: true.secure: false},... }Copy the code
You can add more service domain names to proxy.
Cross-domain problems only occur during development, the url of the packaged file will be replaced by the propped URL, so make sure to send requests with the name DOUBANAPI
request({
url: DOUBANAPI + "/bookList"
});
Copy the code
debugging
There are many problems with debugging in Hbuilder, such as:
- You can’t print it directly
An array of
.object
, needs to be converted to a string. - Even using
The webview debugging
, still can’t print out arrays and is very inconvenient to use on a MAC.
With VConsole, the problem of debugging is basically taken away from Hbuilder. The main advantages of using VConsole are as follows
- You can print arrays, objects
- You can view requests, cookies,Localstorage
- in
System
You can see the page loading speed in the column - You can view elements
Basically a simplified developer toolbar, very easy to debug.
packaging
npm run build
Copy the code
Running the command brings up a dist directory with compressed static files.
Hbuilder release package
Before creating the installation package using Hbuilder, change the entry file to dist/index.html. Then you can pack in peace.
Compatible with mui. Js
For the issue of compatibility with some muI functions, some functions have been ported to Utils and will be ported slowly in future updates.