Comment utiliser Vue pour développer rapidement des outils d'échafaudage d'applications

Cet article présente principalement l'outil d'échafaudage pour développer rapidement des applications avec Vue. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Venez jeter un œil avec l'éditeur

Avant-propos

Plusieurs pages doivent être utilisées pour les pages avec une structure plus simple, car un routeur d'utilisation de page simple est trop lourd. Cet échafaudage a été développé pour un tel scénario

L'utilisation d'un échafaudage avec Hbuilder peut également utiliser rapidement vue pour développer des applications Android et IOS

La plus grande fonctionnalité. de cet article :

1. webpack4

2. Pages multiples

3. Cross Proxy de domaine

4. Débogage mobile VConsole, outils de développement sur téléphones mobiles

5. Conversion babel es6/es7

Adresse du projet GitHub

Manuel d'utilisation

MogoH5+ est un outil d'échafaudage multipage vue qui combine H5+ peut développer rapidement des applications Android et Apple.

Même si Hbuilder n'est pas adapté à l'empaquetage dans des applications, cet échafaudage peut également être utilisé comme projet de référence pour la génération de pages Web multipages.

Fonctionnalités

1. Prise en charge de l'écologie Npm

2. Prise en charge de la syntaxe vue et de l'écologie vue, telles que vux, mint , avant

3. Prise en charge de la syntaxe ES6/ES7

4. Utiliser VConsole pour déboguer

5. Convivial avec VSCode

6. VSCode friendly

7. Débogage LAN pratique

Compatible avec certaines syntaxes mui

Ces fonctionnalités ne sont en fait pas nouvelles, ils ne peuvent tout simplement pas être utilisés seuls dans Hbuilder.

Commencez rapidement

Téléchargez directement le projet, puis personnalisez l'emballage en fonction. vos besoins, et enfin générer l'application via le packaging cloud Hbuilder.

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

Cet article est livré avec un cas de plusieurs interfaces développées à l'aide de VantUI. Si vous aimez d'autres interfaces utilisateur, vous pouvez également les remplacer par d'autres interfaces utilisateur.

Utiliser

Principalement comment utiliser MogoH5+ pour le développement formel Vous. doit respecter les règles du répertoire pendant le processus de développement, sinon il y aura des erreurs inattendues

Structure du répertoire

.
├── 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配置目录

.

Nouvelle page

Si nous voulons créer une nouvelle page nommée list en tant que liste de produits, nous devons créer deux fichiers, list.js et list .vue, sous ./src/page/goods. list.js sert d'entrée multipage, list.vue, l'échafaudage est livré avec plusieurs pages pour référence Suivez le principe du chemin relatif. accédez à cette page en src, ce sera ./goods/list.html !!! Le suffixe doit être html

Nouveau composant

Le composant. est placé dans le répertoire ./src/components. S'il existe de nombreux composants, vous pouvez créer le répertoire vous-même. Par exemple, celui utilisé dans la démo Le composant Logo peut être utilisé comme référence.

Nouvelle bibliothèque d'outils

Bibliothèque d'outils./src/utils contient principalement certaines fonctions publiques, telles que la demande, l'ouverture de la vue Web, le paiement, le partage et d'autres fonctions d'exécution. La démo encapsule certaines fonctions. à partir de mui tels que les événements personnalisés, webview. Ces fonctions peuvent être utilisées comme référence

common.js` est un js qui doit être chargé sur chaque page `fastclick` et `vconsole` sont chargés. Si des statistiques doivent être ajoutées globalement, les fonctions exécutées globalement peuvent être placées dans ce fichier

`./src/utils` a été alias `alias`, qui peut être utilisé directement Charger `import common from ". Utils/common"`.
La requête de démonstration utilise axios et vous pouvez encapsuler la bibliothèque de votre choix.

Les bibliothèques de requêtes courantes incluent fetch, request, SuperAgent, jquery-ajax.
Cross-domain

Parce qu'après le démarrage de npm, la page Web de débogage est suspendue sur le réseau local et sert d'entrée de page à Hbuilder, par conséquent, cross-domain apparaîtra lors de la demande.

Utilisez un proxy local dans ./build.js et remplacez le https://api.douban.com suivant par le nom de domaine professionnel que vous utilisez.

Si vous avez plus de noms de domaine professionnels, vous pouvez continuer à les ajouter dans le proxy

Il n'y aura des problèmes inter-domaines que pendant le développement et le package. L'URL du fichier sera remplacée par l'URL du proxy, donc lors de l'envoi d'une requête, vous devez ajouter le nom DOUBANAPI

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

Debug

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

dans Hbuilder Il y aura de nombreux problèmes lors du débogage, tels que :

Impossible d'imprimer directement des tableaux et des objets, ils doivent être convertis en chaînes.

Même si vous utilisez WebView pour déboguer, vous ne pouvez toujours pas imprimer le tableau et il est très peu pratique à utiliser sur Mac.

1. Utilisation VConsole, le problème de débogage est fondamentalement séparé de Hbuilder. Les principaux avantages de l'utilisation de VConsole sont les suivants

2. peut imprimer des tableaux, des objets

peuvent. afficher les demandes, les cookies, le stockage local

1. peut être vu dans la colonne Système Vitesse de chargement de la page

2. Peut afficher les éléments
En gros, une barre d'outils de développement simplifiée, très simple pour le débogage Got.

4. 
   Emballé

npm run build

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

Hbuilder 发行打包

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

兼容 mui.js

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

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

相关推荐：

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!