vue を使用してアプリのスキャフォールディング ツールを迅速に開発する方法

この記事では、Vue でアプリを素早く開発するためのスキャフォールディング ツールを主に紹介します。編集者はこれが非常に優れていると考えたので、参考として共有します。編集者をフォローして一緒に見てみましょう

前書き

単純なページにルーターを使うのは面倒なので、複数のページを使用する必要があります。このスキャフォールディングは、そのようなページのために開発されました。

Hbuilder でスキャフォールディングを使用すると、vue を使用して Android および IOS アプリを迅速に開発することもできます。

この記事の最大の特徴:

1. 複数のページ

2. クロス-ドメイン プロキシ

3. VConsole モバイル デバッグ、携帯電話上の開発者ツール

4. es6/es7 babel 変換

5. プロジェクト アドレス GitHub

ユーザー マニュアル

MogoH5+ は vue マルチページ スキャフォールディング ツール、H5+ の組み合わせは、Android および Apple APP を迅速に開発できます
Hbuilder を使用して APP にパッケージ化しない場合でも、このスキャフォールディングは複数ページの Web ページ生成の参照プロジェクトとしても使用できます

。

機能

Npmエコロジーをサポート

1. vux、mint、vantなどのvue構文とvueエコロジーをサポート

2. ES6/ES7構文をサポート

3. デバッグにVConsoleを使用

4. vscodeフレンドリーなdebugginglan

5. bui sompatible by suntaxは、実際には新しいものではありません

   プロジェクトを直接ダウンロードし、必要に応じてパッケージをカスタマイズし、最後に Hbuilder クラウド パッケージを通じて APP を生成します。
6. この記事には、VantUI を使用して開発されたいくつかのインターフェイスのケース スタディが含まれています。他の UI に置き換えてください。

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

使用法

主に公式作業での MogoH5+ の使用方法 開発プロセス中は、ディレクトリの規則に従う必要があります。そうしないと、予期しないエラーが発生します 。
ディレクトリ構造

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

新しいページ

listという名前の新しいページを作成するとします。ページが製品リストとして使用される場合は、list.jsと2つのファイルを作成します。 ./src/page/goods 配下の list.js が複数のページへの入り口となる list.vue です。 参考までに
アクセスする場合は相対パスの原則に従ってください。 src 内のこのページは ./goods/list.html になります!!! サフィックスは .html でなければなりません

新しいコンポーネント

コンポーネントが多数ある場合、コンポーネントは ./src/components ディレクトリに配置されますたとえば、デモで使用したロゴ コンポーネントは、参照として使用できます。/src/utils には、主に次のようないくつかの公開関数が含まれています。デモでは、カスタム イベント、WebView などの mui のいくつかの関数がカプセル化されています。これらの関数は、参照として使用できます。 `fastclick` と `vconsole` が各ページにロードされます。統計をグローバルに追加する必要がある場合は、グローバルに実行される関数を `alias` エイリアスとしてこのファイルに配置できます。 「Utils/common」から`import like this common`を直接ロードできます。

リクエストを送信

リクエストライブラリ

デモはaxiosを使用しており、好きなライブラリを自分でカプセル化できます。

一般的なリクエスト ライブラリには、fetch、request、SuperAgent、jquery-ajax が含まれます。
クロスドメイン

npm 起動後、デバッグ Web ページは LAN 上にハングし、Hbuilder のページ入口として機能するため、クロスドメインリクエスト時に -domain が表示されます。./build.js でローカル プロキシを使用し、次の https://api.douban.com を使用するビジネス ドメイン名に変更します。

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

ビジネス ドメイン名を増やすには、プロキシに追加し続けることができます。

開発中にのみクロスドメインの問題が発生するため、パッケージ化されたファイルの URL がプロキシ URL に置き換えられるため、送信時にリクエストに DOUBANAPI という名前を追加する必要があります。 itrreee debugging hbuilderでデバッグするときは、次のように多くの問題がありますデバッグに Webview を使用しますが、Mac では依然として配列を出力できません。また、使用するのが非常に不便です。

VConsole を使用すると、デバッグの問題は基本的に Hbuilder から分離されます。VConsole を使用する主な利点は次のとおりです

。配列とオブジェクトを印刷できます

リクエスト、Cookie、Localstorageを表示できます

システム列でページの読み込み速度を確認できます

要素を表示できます

基本的には簡略化された開発者ツールバー。デバッグが非常に簡単です。

パッケージ化

npm run build

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

Hbuilder 发行打包

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

兼容 mui.js

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

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

相关推荐：

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

以上がvue を使用してアプリのスキャフォールディング ツールを迅速に開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。