Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie Vue, um schnell App-Scaffolding-Tools zu entwickeln

不言
Freigeben: 2018-06-29 14:29:22
Original
2184 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Gerüsttool für die schnelle Entwicklung von Apps mit Vue vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Vorwort

Für Seiten mit einfacherer Struktur sollten mehrere Seiten verwendet werden, da die Seitennutzung einfach ist Der Router ist zu umständlich.

Durch die Verwendung von Gerüsten mit Hbuilder können Sie auch schnell Android- und IOS-APPs entwickeln größtes Merkmal dieses Artikels:

webpack4

  1. Mehrere Seiten

  2. Cross Domain Proxy

  3. VConsole Mobile Debugging, Entwicklertools auf Mobiltelefonen

  4. es6/es7 Babel-Konvertierung

  5. Projektadresse GitHub


Benutzerhandbuch

MogoH5+ ist ein mehrseitiges Gerüstbau-Tool von Vue, das kombiniert H5+ kann schnell Android- und Apple-APPs entwickeln.
Auch wenn Hbuilder nicht zum Verpacken in APPs geeignet ist, kann dieses Gerüst auch als Referenzprojekt für die Generierung mehrseitiger Webseiten verwendet werden.

Funktionen

Unterstützung der Npm-Ökologie

  1. Unterstützt Vue-Syntax und Vue-Ökologie, wie z. B. Vux , mint, vant

  2. Unterstützung der ES6/ES7-Syntax

  3. Verwenden Sie VConsole zum Debuggen

  4. VSCode benutzerfreundlich

  5. Bequemes LAN-Debugging

  6. Kompatibel mit einiger Mui-Syntax

  7. Diese Funktionen sind eigentlich nicht vorhanden Neu, sie können einfach nicht in Hbuilder allein verwendet werden.

Schnell loslegen

Laden Sie das Projekt direkt herunter und passen Sie dann die Verpackung an entsprechend Ihren Anforderungen und generieren Sie schließlich die APP über die Hbuilder-Cloud-Paketierung.
Dieser Artikel enthält eine Fallstudie mehrerer mit VantUI entwickelter Schnittstellen. Wenn Ihnen andere Benutzeroberflächen gefallen, können Sie diese auch durch andere Benutzeroberflächen ersetzen.

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

Verwendung

Hauptsächlich wie man MogoH5+ für die formale Entwicklung nutzt. Sie müssen sich während des Entwicklungsprozesses an die Verzeichnisregeln halten, sonst kommt es zu unerwarteten Fehlern.

Verzeichnisstruktur

.
├── 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配置目录
Nach dem Login kopieren

Neue Seite

Wenn wir eine neue Seite mit dem Namen list als Produktliste erstellen möchten, müssen wir zwei Dateien erstellen, list.js und list. vue, unter ./src/page/goods. list.js dient als Eingang zu mehreren Seiten. Das Gerüst folgt dem relativen Pfadprinzip Diese Seite in src wird ./goods/list.html sein!!! Das Suffix muss .html sein

Neue Komponente

Die Komponente ist im Verzeichnis ./src/components abgelegt. Wenn es viele Komponenten gibt, können Sie das Verzeichnis selbst erstellen. Beispielsweise kann die in der Demo verwendete Logo-Komponente als Referenz verwendet werden.

Neues Tool Bibliothek

Tool-Bibliothek./src/utils enthält hauptsächlich einige allgemeine Funktionen, wie z. B. Anfordern, Öffnen der Webansicht, Bezahlen, Teilen und andere Ausführungsfunktionen. Die Demo kapselt einige Funktionen von mui, z Benutzerdefinierte Ereignisse und Webview. Diese Funktionen können als Referenz verwendet werden.

common.js ist ein JS, das auf jeder Seite geladen werden muss Globale Statistiken müssen hinzugefügt werden, global ausgeführte Funktionen können in dieser Datei platziert werden.
`./src/utils` hat einen Alias ​​von `alias` erstellt, und Sie können `import wie folgt allgemein aus laden „Utils/common“`.

Anfrage senden


Bibliothek anfordern

Die Demo-Anfrage verwendet Axios, und Sie können sie selbst mit einer beliebigen Bibliothek kapseln.

Zu den gängigen Anforderungsbibliotheken gehören fetch, request, SuperAgent, jquery-ajax.

Cross- Domäne

Da nach dem Start von npm die Debug-Webseite im LAN hängt und als Seiteneingang von Hbuilder dient, wird bei der Anfrage domänenübergreifend angezeigt.

Verwenden Sie einen lokalen Proxy in ./build.js und ändern Sie das folgende https://api.douban.com in den von Ihnen verwendeten Geschäftsdomänennamen.

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
  },
  ...
 }
Nach dem Login kopieren

Wenn Sie weitere Geschäftsdomänennamen haben, können Sie diese weiterhin im Proxy hinzufügen.

Während der Entwicklung wird es nur zu domänenübergreifenden Problemen kommen. Die URL der gepackten Datei wird daher durch die Proxy-URL ersetzt Das Senden einer Anfrage muss sicher sein, den Namen DOUBANAPI hinzuzufügen

request({
 url: DOUBANAPI + "/bookList"
});
Nach dem Login kopieren

Debugging

Es wird viele geben Probleme beim Debuggen in Hbuilder, wie zum Beispiel:


Arrays und Objekte können nicht direkt gedruckt werden und müssen in Strings umgewandelt werden.

    Auch wenn Webview wird zum Debuggen verwendet, das Array kann auch nicht auf einem Mac gedruckt werden.
  1. Mit VConsole ist das Debugging-Problem grundsätzlich vom Hbuilder getrennt Die Vorteile der Verwendung von VConsole sind wie folgt:
  2. Ja. Arrays und Objekte drucken

    zum Anzeigen von Anforderungen, Cookies und lokalem Speicher
  1. und in der Systemspalte können Sie die Seitenladegeschwindigkeit sehen
  2. Sie können Elemente anzeigen
  3. Das ist es Im Grunde eine vereinfachte Entwicklersymbolleiste, die zum Debuggen sehr praktisch ist.


    Paket

npm run build
Nach dem Login kopieren

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

Hbuilder 发行打包

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

兼容 mui.js

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

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

相关推荐:

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue, um schnell App-Scaffolding-Tools zu entwickeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
vue
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage