How to use vue to quickly develop app scaffolding tools

This article mainly introduces the scaffolding tool for quickly developing apps with vue. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Preface

Multiple pages should be used for pages with a simpler structure, because the simple page usage The router is too troublesome. This scaffolding was developed for such a scenario.

Using scaffolding with Hbuilder can also quickly use vue to develop Android and IOS APPs.

The biggest feature of this article:

1. webpack4

2. Multiple pages

3. Cross Domain Proxy

4. VConsole mobile debugging, developer tools on mobile phones

5. es6/es7 babel conversion

Project Address GitHub

User Manual

MogoH5 is a vue multi-page scaffolding tool, combined with H5 can quickly develop Android and Apple APPs.

Even if Hbuilder is not used to package it into an APP, this scaffold can also be used as a reference project for multi-page web page generation.

Features

1. Support Npm ecology

2. Support vue syntax and vue ecology, such as vux, mint, vant

3. Support ES6/ES7 syntax

4. Use VConsole to debug

5. ##VSCode friendly

6. Convenient LAN debugging

7. Compatible with some mui syntax

Get started quickly

// 1.安装模块
npm i // or yarn
// 2.调试
npm start  // 将manifest.json 的`页面入口` 修改成 http://your_ip:8082/
// 3.打包
npm run build

Usage

Directory structure

.
├── docs // 文档
├── index.html // 入口模板
├── jsconfig.json //js配置
├── manifest.json //hbuilder 入口文件
├── src 
│  ├── components //组件文件夹
│  │  └── List.vue //组件
│  ├── index.js //主页入口文件
│  ├── index.vue // 主页vue文件
│  ├── page // 页面
│  └── utils // 工具
├── unpackage // hbuilder 构建目录
│  └── res
└── webpack.config.js //webpack配置目录

##New page

If we want to create a new page named list as a product list, we need to create two files, list.js and list.vue, under ./src/page/goods. list.js serves as the entrance to multiple pages, list. vue, the scaffolding comes with several pages for reference.

New component

The component is placed in the ./src/components directory. If there are many components, you can create the directory yourself. For example, the Logo component used in the demo can be used as Reference.

New tool library

Tool library./src/utils mainly contains some public functions, such as request, open webview, payment, sharing, etc. Function. The demo encapsulates some functions from mui such as custom events and webview. These functions can be used as a reference.

Send request

Request library

The demo's request uses axios. Similarly, you can encapsulate whatever library you like.

Cross-domain

Since after npm start, the debugging webpage is hung on the LAN and serves as the page entrance of Hbuilder, therefore, cross-domain will appear during the request.

proxy: {
  "/api": {
   name:"DOUBANAPI", // 自己取名
   target: "https://api.douban.com",
   pathRewrite: { "^/api": "" },
   changeOrigin: true,
   secure: false
  },
   "/baidu_api": {
   name:"BAIDUAPI", // 自己取名
   target: "https://api.baidu.com",
   pathRewrite: { "^/api": "" },
   changeOrigin: true,
   secure: false
  },
  ...
 }

request({
 url: DOUBANAPI + "/bookList"
});

Debugging

There will be many problems when debugging in Hbuilder, such as :

1. Even if webview is used for debugging, the array still cannot be printed. It is also very inconvenient to use on a mac.

2. Using VConsole, the debugging problem is basically separated from Hbuilder. The main advantages of using VConsole are as follows

1. You can view the request, cookie, Localstorage

2. You can see the page loading speed in the System column

3. You can view elements

4. 
   

   It is basically a simplified developer toolbar, which is very convenient for debugging.

Pack

npm run build