基礎1. スキャフォールディングを使用してプロジェクトを作成し、開始する1.1 足場を設置する: npm インストール -g 作成-react-app 1.2 スキャフォールディングを使用してプロジェクトを作成する: React アプリの作成、antd の起動、デモ antd-start-demo はプロジェクト名です。 1.3 起動 npm スタート 2. npmをyarnに変換する2.1 yarnをインストールする: npm インストール -g 糸 2.2 yarnの現在のイメージソースを取得します。 yarn config レジストリを取得する 2.3 Taobaoミラーとして設定する: yarn config レジストリ 'https://registry.npm.taobao.org' を設定します 2.4 一般的なコマンド: yarn init --initialize yarn add --add module yarn remove --remove module yarn /yarn install --install dependency in the project プロジェクト構築2.1 react-router 4.0、axios、less-loaderをインストールする yarn react-router-dom axios less-loader を追加します 2.2 webpack設定の公開 糸排出 ヒント: yarn ejectを実行してエラーが発生した場合 ファイルを変更した後、yarn eject コマンドを使用すると、上記のエラーが報告されます。これは、scaffolding を使用してプロジェクトを作成したときに、.gitignore ファイルが自動的に追加されたが、ローカル ウェアハウスがないためです。このときは、次のコマンドを実行して、プロジェクトをローカル ウェアハウスに追加してから実行します。 git を追加します。 git コミット -m 'init' 糸排出 次に、yarn eject を実行します。 webpack の設定 2.3 less-loaderの設定 Antd は less をベースに開発されています。less を使用すると、テーマの色やその他の構成を簡単に変更できます。 lessモジュールをインストールします: config/webpack.config.dev.js を開き、次の構成を追加します。 { テスト: /\.less$/, 使用: [ require.resolve('スタイルローダー'), { ローダー: require.resolve('css-loader'), オプション: { importLoaders: 1 }, }, { // PostCSS のオプション。これらのオプションを 2 回参照します。 // 指定したブラウザのサポートに基づいてベンダープレフィックスを追加します // パッケージ.json ローダー: require.resolve('postcss-loader'), オプション: // 外部 CSS インポートが機能するために必要 // https://github.com/facebook/create-react-app/issues/2677 識別子: 'postcss', プラグイン: () => [ 'postcss-flexbugs-fixes' が必要です。 'postcss-preset-env' が必要です({ 自動プレフィックス: { フレックスボックス: 'no-2009', }, ステージ: 3, })、 ]、 }, }, { ローダー: require.resolve('less-loader') } ]、 }, 図に示すように同じレベルでcssloadを構成するには 画像の例 注: webpack.config.dev.js に追加された構成部分は、webpack.config.prod.js でも構成する必要があります。そうしないと、プロジェクトがリリースされた後にエラーが発生し、プログラムを実行できなくなる可能性があります。 2.4 antdをインストールする 糸を追加 antd 2.5 テスト使用 "antd"から{Button}をインポートします。 'antd/dist/antd.css' をインポートします。 ... 与える() { 戻る ( <div> <Button>クリック</Button> </div> ); } ... 注: デフォルトでは、インストールされた antd はスタイルを有効にするために antd/dist/antd.css をインポートする必要があります。ただし、多くの場合、一部のコンポーネントのみを使用し、antd スタイル ファイル全体をインポートするため、損失する価値はありません。そこでオンデマンドローディングが誕生しました。 2.6 antd オンデマンド読み込み yarn に babel-plugin-import を追加 2. webpack設定を開いて検索: JS with Babel 次の構成を見つけます。 // Babel を使用してアプリケーション JS を処理します。 // プリセットには、JSX、Flow、TypeScript、およびいくつかの ESnext 機能が含まれています。 { テスト: /\.(js|mjs|jsx|ts|tsx)$/, インクルード: paths.appSrc、 ローダー: require.resolve('babel-loader'), オプション: カスタマイズ: require.resolve( 'babel-preset-react-app/webpack-overrides' )、 プラグイン: [ [ require.resolve('babel-plugin-named-asset-import'), { ローダーマップ: { svg: { Reactコンポーネント: '@svgr/webpack?-prettier,-svgo![パス]', }, }, }, ]、 ]、 キャッシュディレクトリ: true、 // 時間がそれほど重要でない場合はディスク容量を節約する キャッシュ圧縮: true、 コンパクト: true、 }, }, プラグインを変更して以下を追加します: ["import", { "libraryName": "antd", "style": true }] この時点で、CSS ファイルの導入をキャンセルできます。Babel は、導入されたコンポーネントに基づいて、デフォルトで対応する CSS を自動的にロードします。 2.7 テーマカラーを変更する { ローダー: require.resolve('less-loader'), オプション: モジュール: false、 変数の変更: { "@プライマリカラー": "#f9c700" } } } webpack の less の設定で変更できます。 @primary-color は antd に組み込まれた less 変数です。テーマの色を変更するには、デフォルトの設定を上書きするだけです。 注: yarn run start を実行するとエラーが報告されます ValidationError: 無効なオプション オブジェクト。Less Loader はオプション オブジェクトを使用して初期化されています 解決策: less-loader をアンインストールし、[email protected] をインストールします。 糸を取り除く 少ないローダー yarn [email protected] を追加します React+Ant Design開発環境の構築手順については以上です。React Ant Design構築に関するより詳しい内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Linux オペレーティング システムでよく使用される MySQL コマンドの概要
背景CVE-2021-21972 VMware vCenter における認証されていないコマンド実行...
MySQLの左結合が無効であり、その使用方法今日SQLを書いていたとき、左結合を使用すると左のテーブ...
目次スムーズなアニメーションの基準方法1: Chromeデベロッパーツールを使用する方法 2: フレ...
<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...
最初で最も重要なステップは、Windows 環境に Ngnix サービスをインストールする方法です。...
CSS の将来は非常に楽しみです。一方では、まったく新しいページ レイアウト方法であり、他方では、ク...
以下は、docker の golang イメージに基づいて ssh サービスを構築するためのコードで...
この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...
用語: 1. VM: 仮想マシンステップ: 1. Windows 10 に VirtualBox 6...
この記事の例では、画像拡大鏡効果を実現するためのVue3の具体的なコードを参考までに共有しています。...
:not疑似クラスセレクターは、式に一致しない要素をフィルタリングできます。例 テーブル tbod...
Web ページの外観はレイアウトに大きく左右されます。ページ内に長い段落のテキストがある場合、通常は...
私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...
コードをコピーコードは次のとおりです。 <前> <div> <sele...
目次1分でgithub+Jekyllブログにトラフィック機能を追加する1. ジェクルとは何か1. J...