h5側でuniappプロジェクトを実行する方法

モバイル インターネットの急速な発展に伴い、クロスエンド開発テクノロジに注目し、使用する企業が増えています。 Uniapp は、Vue.js とミニプログラム開発機能を統合したクロスプラットフォーム開発フレームワークとして、多くの企業で広く使用されています。

Uniapp は、WeChat アプレット、Alipay アプレット、Baidu アプレット、H5 側、アプリ側など、さまざまなプラットフォームでの実行をサポートしています。この記事では、主に H5 側で Uniapp を実行する方法を紹介します。

1. プロジェクトの初期化

Uniapp プロジェクトを実行する前に、まずプロジェクトを初期化する必要があります。コマンド ラインに次のコマンドを入力します。

npm install -g @vue/cli

vue create -p dcloudio/uni-preset-vue my-project

ここで、「my-project」はプロジェクト名で、必要に応じて変更できます。初期化が完了したら、編集やデバッグのためにプロジェクトを開発ツールにインポートできます。

2. ページ コードの記述

Uniapp では、Vue の単一ファイル コンポーネントを記述することでページを開発できます。以下は簡単な例です:

<template>
  <view class="container">Hello world!</view>
</template>

<style>
  .container {
    text-align: center;
    font-size: 24px;
    color: #333;
  }
</style>

ページでは、さまざまなコンポーネントを使用してカラフルなインタラクティブ効果を実現できます。

3. H5 実行環境の構成

ページの作成が完了したら、プロジェクトを実行するために H5 実行環境を構成する必要があります。

1. manifest.json を変更する

プロジェクトのルート ディレクトリで、Uniapp プロジェクトのいくつかの基本プロパティを定義するmanifest.json ファイルを見つけます。 H5 側の動作をサポートするには、次の属性値を true に設定する必要があります。

"h5": {
  "baseApiUrl": "",
  "devServer": {
    "host": "",
    "port": "",
    "compress": true
  },
  "subpackages": true,
  "postcss": true,
  "customVars": true
}

2. 依存関係のインストール

次のコマンドを実行して、H5 に必要な依存関係パッケージをインストールします:

npm install uni-html-webpack-plugin html-webpack-plugin webpack-dev-server webpack-cli webpack -D

3. Webpack の構成

プロジェクトのルート ディレクトリで、vue.config.js ファイルを作成し、次のコードを追加します:

const path = require('path');
const fs = require('fs');

const UniHtmlWebpackPlugin = require('uni-html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  configureWebpack: (config) => {
    const pages = {};
    const entries = {};
    const templateDir = './public';
    const templateExt = '.html';

    const appDirectory = fs.realpathSync(process.cwd());
    const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

    const getEntries = (dir, ext) => {
      const entryFiles = fs.readdirSync(dir);
      let regx = new RegExp(ext + '$');
      return entryFiles.filter(file => regx.test(file)).reduce((entry, file) => {
        const filename = file.replace(new RegExp(ext + '$'), '');
        entry[filename] = path.join(dir, filename);
        return entry;
      }, {});
    };

    const getPages = (entryDir, templateDir, templateExt) => {
      const entryFiles = fs.readdirSync(entryDir);
      let regx = new RegExp('\.(' + Object.keys(entries).join("|") + ')$');
      return entryFiles.filter(file => regx.test(file)).reduce((pages, file) => {
        const filename = file.replace(regx, '');
        const template = path.join(templateDir, filename + templateExt);
        pages[filename] = {
          entry: entries[filename],
          template,
          filename: `${filename}.html`,
          chunks: ['chunk-vendors', 'chunk-common', filename]
        };
        return pages;
      }, {});
    };
    Object.assign(entries, getEntries('./src/pages', '.vue$'));
    Object.assign(pages, getPages('./src/pages', templateDir, templateExt));

    config.entry = entries;
    config.plugins = config.plugins.concat(
      Object.keys(pages).map((name) => {
        const page = pages[name];
        return new HtmlWebpackPlugin({
          title: name,
          template: page.template,
          filename: page.filename,
          chunks: page.chunks,
          inject: true,
          minify: {
            removeComments: false,
            collapseWhitespace: false,
            removeAttributeQuotes: false,
            minifyJS: false,
            minifyCSS: false,
            minifyURLs: false
          }
        });
      }),
      new UniHtmlWebpackPlugin()
    );
  }
};

4. プロジェクトを実行します

After上記の手順を完了したら、コマンド ラインに次のコマンドを入力して H5 実行環境を開始できます:

npm run dev:h5

同時に、次のコマンドを実行してパッケージ化することもできます:

npm run build:h5

実行およびパッケージ化のプロセス中に、Uniapp は、開発者がプロ​​ジェクトをより迅速に開発および維持できるように、豊富な開発およびデバッグ ツールも提供します。

概要

この記事では、H5 側で Uniapp プロジェクトを実行する方法を簡単に紹介します。適切なツールを構成して使用することで、開発者はクロスエンド開発をより効率的に行うことができます。実際のプロジェクトでは、さまざまなシナリオの要件を満たすために、独自のニーズに基づいて柔軟な調整や拡張を行うこともできます。

以上がh5側でuniappプロジェクトを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。