目次
1. 環境
Node.jsをインストールする
Node.js 環境により、システム上で js コードを実行できるようになります
1. イメージ ファイルをダウンロードします: https://nodejs.org/download/release/v18.8.0/node-v18.8.0-x64.msi
2. インストール ウィザードに従って、node.js のインストールを完了します。
3. インストールが完了したかどうかを確認します。次の図に示すように、Windows cmd コマンド ラインを開き、「npm --version」と入力してバージョン情報を出力します。インストールは成功しました。
糸ツールをインストールする
Node.jsにはnpmパッケージ管理ツールが付属していますが、yarnもnodejs配下のパッケージ管理ツールですので、ご自身に合わせて適切なツールを選択してください。
1. cmd コマンド ラインに「npm installyarn -g」と入力して、グローバルにインストールします。
2. インストールが完了したかどうかを確認します: cmd コマンドラインに「yarn -version」と入力し、下図に示すようにバージョン情報が出力されればインストールは成功です。
2. プロジェクトを作成する
1. プロジェクトを作成するディレクトリにコマンド ラインを入力し、「yarn create vite プロジェクト名」と入力します。
フレームを選択してください:
属性を選択します:
2. プロジェクト ディレクトリに入り、「cd プロジェクト名」と入力します。
3. 依存関係をインストールします。「yarn」と入力します。
4. プロジェクトを実行し、「yarn dev」と入力します --> localhost:5173 を開きます
5. ブラウザにアドレスを入力してアクセスすると、下の画像が最初のページです。
3. プロジェクトディレクトリの整理
プロジェクトの初期ディレクトリ構造
| 公共 | 静的リソース (画像、js ファイル) ディレクトリ | |
| 送信元 | 資産 | 静的リソースディレクトリ |
| コンポーネント | コンポーネントカタログ | |
| main.js | エントリーファイル | |
| app.vue | ルートコンポーネント | |
| ノードモジュール | プロジェクトの依存関係パッケージ | |
| インデックス.html | デフォルトの vue マウント要素 | |
| パッケージ.json | 現在のプロジェクトの基本情報、プロジェクトの依存関係情報、コマンド管理ツールの構成 | |
| vite.config.js | プロジェクト全体の構成情報 | |
| 糸ロック | yarnコマンドの実行時に記録される情報 | |
プロジェクトの読み込みプロセス
Yarn dev を使用してプロジェクトを実行すると、package.json ファイル内のスクリプトによって定義されたコマンドが読み取られ、対応する命令が呼び出されます。
次に、エントリ ファイルが読み取られます: src/main.js
- Vue とカスタム コンポーネントをインポートする
- Vue をインスタンス化し、index.html ファイル内の ID app を持つ要素にアプリをマウントします。
4.統合UIコンポーネントライブラリバント
Vant をオンデマンドでロードするように構成する
1.モジュールをインストールする
//バントをインストールする
糸追加バント
// オンデマンドでモジュールをロードする
糸追加 unplugin-vue-components -D
2. vite.config.js ファイルでオンデマンド読み込みを構成する
「vite」から {defineConfig} をインポートします
「@vitejs/plugin-vue」から vue をインポートします
「unplugin-vue-components/vite」からコンポーネントをインポートします
import { VantResolver } から 'unplugin-vue-components/resolvers'
デフォルトのdefineConfigをエクスポート({
プラグイン: [
vue()、
コンポーネント({
リゾルバー: [VantResolver()]、
})、
]、
});
コンポーネントを使用する
Vant のインストールと構成が完了すると、Vant コンポーネントをテンプレート内で直接使用できます。unplugin-vue-components がテンプレートを解析し、対応するコンポーネントを自動的に登録します。
Vant 公式ドキュメント: https://vant-contrib.gitee.io/vant/#/zh-CN
src/App.vue のコンポーネントを使用します。
<template>
<van-button type="primary">プライマリ ボタン</van-button>
</template>
関数コンポーネントのスタイルの導入
ToastVant の一部のコンポーネントは、 、Dialog、 コンポーネントNotify など 、関数の形式で提供されます。 ImagePreview
必要な場所にインポートして使用するだけです
// トースト
'vant' から { showToast } をインポートします。
'vant/es/toast/style' をインポートします。
// ダイアログ
'vant' から { showDialog } をインポートします。
'vant/es/dialog/style' をインポートします。
// 通知する
'vant' から { showNotify } をインポートします。
'vant/es/notify/style' をインポートします。
// 画像プレビュー
import { showImagePreview } から 'vant';
'vant/es/image-preview/style' をインポートします。
5. 統合UIコンポーネントライブラリNutUI
NutUI のオンデマンド読み込みを構成する
1.インストール
糸追加 @nutui/nutui
2. プラグイン NutUI スタイルをインストールして、オンデマンドでプラグインをロードします
糸追加コンソーラ
糸の追加 vite-plugin-style-import
3. vite.config.js ファイルで NutUI スタイルのオンデマンド読み込みを構成します
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'// ここに追加します
import { createStyleImportPlugin } from 'vite-plugin-style-import'
エクスポート デフォルトのdefineConfig({ plugins: [ vue(), Components({ solvers: [VantResolver()], }), // ここに追加します createStyleImportPlugin( { 解決: [{ libraryName: '@nutui/nutui', libraryNameChangeCase: 'pascalCase', solveStyle: (name) => { return `@nutui/nutui/dist/packages/${name.toLowerCase()}/index. scss` }, }] }), ],
// ここに追加します
css: { preprocessorOptions: { scss: { // Nutui グローバル scss 変数を設定します AdditionalData: `@import "@nutui/nutui/dist/styles/variables.scss";` } } }, })
コンポーネントを使用する
NutUI コンポーネントの公式ドキュメント: https://nutui.jd.com/h5/vue/4x/#/zh-CN/component/button
NutUI は Vant のように自動的にインポートされません。NutUI のオンデマンド自動読み込みにはスタイル ファイルしかないため、手動でインポートする必要があります。
- コンポーネントを使用して、ロードするコンポーネントを定義します。
src の下に新しい plugins/nutui.js を作成します。将来コンポーネントを追加する必要がある場合は、このファイルに追加するだけで済みます。
//ロードするコンポーネントの名前を定義するために使用されます
import { Button, } from '@nutui/nutui' //エクスポートします。エクスポートした後でのみ、他のファイルをインポートできます。 export const NutUiComponents = [ Button, ];
- src/main.js ファイルにインポート
//インポートを追加
'./plugins/nutUI' から {nutUiComponents } をインポートします。
//App.vue (ルートコンポーネント) に基づいて vue インスタンスを作成します
const app = createApp(App)//インポートされた NutUI コンポーネントをグローバルに使用します
NutUiComponents.forEach((item)=>{ app.use(item) }) //vue インスタンスをindex.html にマウントします => #app app.mount('#app')
- ルートコンポーネント App.vue で使用されます
<template>
<nut-button type="primary"> 主要按钮</nut-button>
</template>
6. よくある間違い
ページが空白で表示されるか、ページに変更がありません。
- コードにエラーがある場合は、yarn dev の実行時にプロンプトが表示されます。
- yarn dev はホット ロードに対して不安定です。コマンド ラインで Ctrl+c を押して、yarn dev を中断して再起動します。