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

These features are actually not new features, but they cannot be used in Hbuilder alone.

Get started quickly

Directly download the project and then customize the packaging according to your needs, and finally generate the APP through Hbuilder cloud packaging.

This article comes with a case of several interfaces developed using VantUI. If you like other UIs, you can also replace them with other UIs.

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

Usage

Mainly how to use MogoH5 for formal development. You must abide by the directory rules during the development process, otherwise there will be unexpected errors.

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.

Follow the relative path principle. If you access this page in src, it will be ./goods/list.html!!! The suffix must be .html

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.

common.js` is a js that needs to be loaded on each page, and `fastclick is loaded in it ` and `vconsole`. If global statistics need to be added, globally executed functions can be placed in this file.

`./src/utils` has made `alias` alias, you can directly load `import like this common from "Utils/common"`.

Send request

Request library

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

Common request libraries include fetch, request, SuperAgent, jquery-ajax.

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.

Use the local proxy in ./build.js and change the following https://api.douban.com to the business domain name you use.

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
  },
  ...
 }

If you have more business domain names, you can continue to add them in the proxy.

There will only be cross-domain problems during development. The packaged file URL will be replaced by the proxy URL, so sending a request must be certain. To add the name DOUBANAPI

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

Debugging

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

Arrays and objects cannot be printed directly and need to be converted into strings.

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

Yes Print array, object

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

运行命令后会有一个 dist 目录,里面的经过压缩的静态文件.

Hbuilder 发行打包

在使用 Hbuilder 制作安装包前,请将 入口文件 修改成 dist/index.html . 然后可以安心的打包了.

兼容 mui.js

对于兼容 mui 部分函数的问题,已经在移植部分函数到Utils中,在未来的更新中会慢慢移植.

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

在vscode中vue编码风格统一的方法介绍

The above is the detailed content of How to use vue to quickly develop app scaffolding tools. For more information, please follow other related articles on the PHP Chinese website!