vue を使用してアプリのスキャフォールディングツールを迅速に開発する方法-jsチュートリアル-php.cn

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

不言

リリース： 2018-06-29 14:29:22

オリジナル

2159 人が閲覧しました

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

前書き

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

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

この記事の最大の特徴:

複数のページ
クロス-ドメインプロキシ
VConsole モバイルデバッグ、携帯電話上の開発者ツール
es6/es7 babel 変換
プロジェクトアドレス GitHub

ユーザーマニュアル

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

。

機能

Npmエコロジーをサポート

vux、mint、vantなどのvue構文とvueエコロジーをサポート
ES6/ES7構文をサポート
デバッグにVConsoleを使用
vscodeフレンドリーなdebugginglan
bui sompatible by suntaxは、実際には新しいものではありません
プロジェクトを直接ダウンロードし、必要に応じてパッケージをカスタマイズし、最後に Hbuilder クラウドパッケージを通じて APP を生成します。
この記事には、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を表示できます

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

要素を表示できます

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

パッケージ化