vue element ui scaffold webpack4
1.0.0
webpack5 にアップグレードされました。 webpack4 を使用する必要がある場合は、ブランチを切り替えることができます: git checkout webpack4 。
**vue3 + element-ui + webpack5 バージョン: 切り替え可能なブランチ: git checkout vue3 **
このプロジェクトは、Vue で element-plus を使用し、webpack5 に基づいて構築された複数ページ、複数環境のスキャフォールディング プロジェクトです。
プロジェクトエフェクトプレビュー1 プロジェクトエフェクトプレビュー2
git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install
ビルド速度が速くなり、パッケージ ファイル サイズが小さくなります。
HTML ページ ファイルを自動的に出力する 2 つの方法 (html-webpack-plugin によって実装):
開発中に、src/iconfont/svgs ディレクトリ内の svg ファイルを変更または追加または削除して、フォント アイコン (ttf、woff2、woff、eot、svg をサポート) を自動的に生成し、同時に CSS スタイルと HTML プレビューをサポートします。すぐに効果がわかります。 npm run build-font を使用してこれらのファイルを手動で生成することもできます。 フォント アイコン、CSS、およびアイコン プレビューを生成および変更するために icomoon.io または iconfont.cn に手動で移動する必要はありません。 webpack-iconfont-plugin-nodejs に基づいて実装されています。
プロジェクトでは、バックエンド インターフェイスのデータ シミュレーションとして Dynamic-Mocker を使用できます。 シミュレーション データはモック フォルダーにあり、理解しやすく便利で柔軟な js ファイルを使用して実装されます。
有効化方法: 1. npm run dev はデフォルトでモックサービスを同時に開始します。 2. 単独で実行: npm run mock。
設定ファイル: 1. config/serverMap.js のインターフェイス サービス アドレスは次のとおりです:base: '"//localhost:8085"' 2.mock/mock-config.js ファイルはモックのさまざまなパラメーターを設定します。
css オンデマンド読み込みのソースは、プリコンパイルされた css ファイルではなく、element-plus の scss ファイルを直接指します。コンパイル時に、join-file-content-plugin プラグインを介して、src/assets/css/element-theme/theme-changed.scss ファイルを element-plus テーマ変数ファイル theme-chalk/src/common/var.scss に追加します。要素プラス scss ファイルを css ファイルに事前コンパイルしなくても、scss 変数を変更した直後に効果を確認できます。同時に、element-plus の scss 変数はプロジェクト内のどこからでも参照できます。
webpack-theme-color-replacer プラグインを使用して、Webpack の構築時に CSS 内のテーマ カラーを含むスタイル ルールを抽出し、css/theme-colors.css ファイルを生成します。次に、Web ページの実行中に、この CSS ファイルをダウンロードし、その中の色をカスタム テーマの色に動的に置き換えます。色関連のCSSのみを抽出するため、Element-plusのCSS全体をダウンロードするよりもはるかに高速です。また、要素プラススタイルだけでなく、プロジェクト内の自作スタイルのテーマカラーも置き換えることができます。
コードを公開すると、ソース コード マッピング ファイルが統合ソース コード マッピング フォルダーに生成され、テスト環境で自動的にマッピングされます。コードのセキュリティのため、実稼働環境ではデバッグが必要な場合に自動マッピングは実行されません。Chrome では URL を介したソース コードの手動マッピングがサポートされています。 セキュリティ要件により、このソース コード マッピング フォルダー名は開発者のみが知っているフォルダー名になります。または、動的暗号化アルゴリズムを使用してこのフォルダー名を生成します。または、これらのソース コード マッピング ファイルを、ログイン認証が必要な Web サイトのディレクトリに配置します。必要に応じて、 config/index.jsファイルのgetSourceMapPath関数内のディレクトリ名を変更してください。 このようにして、バグが発生し、オンライン デバッグが必要な場合、ソース コード マッピングを迅速かつ手動で追加してデバッグを容易にし、ソース コードの漏洩を回避できます。
vw+rem の単純なソリューションを使用して、レスポンシブ レイアウトを実装します。 postcss-pxtorem プラグインを使用して、CSS の単位を px から rem に自動的に変換します。開発中は、px が引き続き CSS の長さの単位として使用されます。 1rem = 100px、デバッグ中に簡単に変換できます。 PC、モバイル端末共通（Element-plusをモバイル端末用の他のUIフレームワークに置き換えるのが最適です）。
IE10以降、Chrome、Firefox、Safari、QQ、360、2345、その他のブラウザと互換性があります。モバイル版に変更する必要がある場合は、.browsersrc をモバイル版に変更してください。
npm run dev
ローカルでの開発とデバッグ。 config/serverMap.js で dev によって構成されたバックエンド インターフェイス サービス アドレスを使用します。
npm run build-test
テスト環境の展開に使用されます。 jsにはソースコードマッピングがありますが、cssにはソースコードマッピングがありません。 config/serverMap.js のテストで構成されたインターフェイス サービス アドレスを使用します。
npm run build
実稼働環境の展開用。 config/serverMap.js で prod によって構成されたインターフェイス サービス アドレスを使用します。
npm run build-demo
構成は運用環境と同じですが、インターフェイス サービス アドレスが異なります。config/serverMap.js のデモで構成されたインターフェイス サービス アドレスを使用します。
npm run build-dev
開発環境サーバーへの公開とデプロイに使用され、デバッグのためにサーバーへの公開が必要な状況に適しています。 config/serverMap.js で dev によって構成されたインターフェイス サービス アドレスを使用します。
npm run build-preview
静的モック データが有効になり、バックエンド サービスは必要ありません。モック データは、Ajax 呼び出しをシミュレートするために使用されます (対応する API インターフェイスにモック データが書き込まれている場合)。 npm run build --preview && npm run play-distと同等。
npm run play-dist
dist ディレクトリをルート ディレクトリとして使用し、ローカルの静的 http サービスを開始して、公開後に dist ディレクトリの実行結果を表示します。
npm run mock
バックエンド インターフェイス サービスが完了していない場合、バックエンド インターフェイス データをシミュレートしてフロントエンド機能をデバッグするために使用できます。
npm run proxy80
既存のポート（ポート 80xx）をポート 80 またはポート 443 にプロキシすることで、アクセス時にポートを非表示にすることができ、https アクセスも実現できます。システム ホストと組み合わせて、指定されたドメイン名として 127.0.0.1 を構成すると、ドメイン名を直接使用してローカル デバッグ ページにアクセスできます。このページは、ドメイン名アクセスを使用する必要がある一部のシナリオ (WeChat のデバッグなど) をデバッグするために使用されます。詳細については、https://www.cnblogs.com/hz -blog/p/wechat-local-debug-domain.html を参照してください。
