プロジェクトを素早く構築するためのvite+vue3.0+ts+element-plusの実装

プロジェクトを素早く構築するためのvite+vue3.0+ts+element-plusの実装

Vite がバージョン 2.x をリリースしました。学習目的で簡単なプロジェクトを作成することにしました。フロントエンド開発者なら必ず知っておくべき element-plus と typescript を組み合わせて、以下の内容を実装しました。

vite は、ネイティブ ESM を搭載した Web 開発ビルド ツールです。開発環境ではブラウザのネイティブESインポートをベースに開発し、本番環境ではRollupをベースにパッケージ化します。

バイト機能

  • 高速コールドスタート:パッケージング操作を待つ必要はありません。
  • 即時ホット モジュール アップデート: 交換パフォーマンスとモジュール数量を切り離すことで、アップデートが高速化されます。
  • 真のオンデマンド コンパイル: アプリケーション全体がコンパイルされるまで待つ必要がなくなりました。これは大きな変化です。

使用環境

  • ノードv12.19.0
  • @vue/cli 4.5.8

プロジェクトを構築する

npm init vite-app <プロジェクト名>
cd <プロジェクト名>
npmインストール
npm 実行 dev

または

yarn create vite-app <プロジェクト名>
cd <プロジェクト名>
糸
糸開発

構成

vite.config.ts

vite.config.ts は @vue-cli プロジェクトの vue.config.js と同等です。

「path」からパスをインポートします。

const pathResolve = (pathStr: 文字列) => {
  path.resolve(__dirname, pathStr) を返します。
}

定数設定 = {
  base: './', // 本番環境で提供する際の基本パブリックパス。 @デフォルト '/'
  エイリアス: {
    '/@/': パスを解決します('./src'),
  },
  outDir: 'vite-init', // ビルド出力が配置される場所。ビルド前に古いディレクトリは削除されます。 @default 'dist'
  minify: 'esbuild', //ビルド時の圧縮方法 hostname: 'localhost', //ローカルサービスアドレス port: '8800', //サービスポート番号 open: false, //サービス起動時にブラウザでhttpsを開くかどうか: false, //httpsを開くかどうか
  ssr: false, //サーバー側でレンダリングするかどうか optimizeDeps: { //サードパーティの設定を導入 include: ['axios']
  },
  // proxy:{// プロキシ設定 // '/api': {
  // ターゲット: 'http://xx.xx.xx.xx:xxxx',
  // 変更元: true、
  // ws: true、
  // 書き換え: (path: string) => { path.replace(/^\/api/, '') }
  // }
  // }
}
モジュールをエクスポートします。

tsconfig.json

{
  "コンパイラオプション": {
    "target": "ES5", // ECMAScript のターゲット バージョンを指定します: 'ES3' (既定値)、'ES5'、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020'、または 'ESNEXT'。
    "module": "commonjs", // モジュール コード生成を指定します: 'none'、'commonjs'、'amd'、'system'、'umd'、'es2015'、'es2020'、または 'ESNext'。
    "strict": true, // すべての厳密な型チェック オプションを有効にするかどうか。
    "baseUrl":"./", // 絶対でないモジュール名を解決するために使用されるベース ディレクトリ。
    「パス」: {
      "/@/*": ["./src/*"]
    },  
    "noImplicitAny": true, //暗黙的な 'any' 型を持つ式と宣言に対してエラーを発生させます。
    "esModuleInterop": true, //すべてのインポートに対して名前空間オブジェクトを作成して、CommonJS モジュールと ES モジュール間の相互運用性を有効にします。 「allowSyntheticDefaultImports」を意味します。
    "experimentalDecorators": true, // ES7 デコレータの実験的なサポートをサポートします。
    "skipLibCheck": true, //宣言ファイルの型チェックをスキップします。
    "forceConsistentCasingInFileNames": true // 同じファイルへの大文字と小文字の不一致な参照を無効にします。
  }
}

アプリ.vue

app.vue を変更する

<テンプレート>
  <img alt="Vue ロゴ" src="./assets/logo.png" />
  <ルータービュー />
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
  設定() {

  }
}
</スクリプト>

ビュー

srcの下に新しいviewsフォルダを作成し、そのフォルダにindex.vueを作成します。

<テンプレート>
  <HelloWorld :msg="メッセージ"></HelloWorld>
</テンプレート>

<script lang="ts">
「/@/views/HelloWorld.vue」からHelloWorldをインポートします。
「vue」からdefineComponentをインポートします。
エクスポートデフォルトdefineComponent({
  名前: "ホーム",
  コンポーネント: { HelloWorld },
  設定() {
    戻る {
      メッセージ: 「こんにちは世界」、
    };
  },
});
</スクリプト>

PS: .vueファイルをインポートするときは、必ずサフィックスを付けてください。そうしないと、ファイルが見つからないと報告されます。

viewsフォルダにHelloWorld.vueを作成します。

<テンプレート>
  <h1>{{ メッセージ }}</h1>
  <button @click="realTime.count++">カウントは: {{ realTime.count }}</button>
  <button @click="handleclick">クリックすると他のルートにジャンプします</button>
  <p>ホット モジュール置換をテストするには、<code>components/HelloWorld.vue</code> を編集します。</p>
</テンプレート>

<スクリプト>
「vue」から、defineComponent、reactive をインポートします。
'vue-router' から { useRouter } をインポートします。
エクスポートデフォルトdefineComponent({
  名前: 'インデックス'、
  プロパティ: { メッセージ: { タイプ: 文字列、デフォルト: 'vue3 へようこそ' } },
  セットアップ(プロパティ) {
    定数ルーター = useRouter();
    realTime = reactive({ count: 0 } とします);

    関数handleclick() {
      router.push({ パス: '/other' })
    }
    戻る {
      メッセージ: props.msg、
      リアルタイム、
      ハンドルクリック
    }
  }
})
</スクリプト>

ルーター

srcの下に新しいルーターフォルダを作成し、そのフォルダにindex.tsを作成します。

'vue-router' から {createRouter、createWebHistory、RouteRecordRaw} をインポートします。

const ルート: Array<RouteRecordRaw> = [
  {
    パス: '/'、
    コンポーネント: () => import("/@/views/index.vue")
  },
]

エクスポートデフォルトcreateRouter({
  履歴: createWebHistory(),
  ルート
})

メイン.ts

元の main.js を main.ts に変更します。変更後、index.html も main.ts に変更することを忘れないでください。

'vue' から {createApp} をインポートします。
'./router/index' からルーターをインポートします
'./App.vue' からアプリをインポートします。
'element-plus' から ElementPlus をインポートします

'element-plus/lib/theme-chalk/index.css' をインポートします。
'./reset.css' をインポートします

const app = createApp(App);
app.use(ElementPlus);
app.use(ルーター);
app.mount('#app');

注意深い学生はこの時点で発見したかもしれません:.vueファイルがtsファイルに導入されると次のエラーが発生しますが、コードの通常の動作には影響しません。

エラーの理由: Typescript は .ts ファイルのみを理解でき、.vue ファイルは理解できません

解決策: プロジェクトのルート ディレクトリまたは src フォルダーに、サフィックスが .d.ts のファイルを作成し、次の内容を記述します。

モジュール '*.vue' を宣言します { }
モジュール '*.js' を宣言します
モジュール '*.json' を宣言します。
モジュール '*.svg' を宣言します
モジュール '*.png' を宣言します
モジュール '*.jpg' を宣言します
モジュール '*.jpeg' を宣言します
モジュール '*.gif' を宣言します
モジュール '*.bmp' を宣言します
モジュール '*.tiff' を宣言します

プロジェクトが完了したので、安心してコードを記述できます。

vite+vue3.0+ts+element-plus クイックプロジェクト構築の実装に関するこの記事はこれで終わりです。vite+vue3.0+ts+element-plus 構築に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Viteはプロジェクトを構築し、マイクロフロントエンドをサポートします
  • この記事では、Viteがブラウザのリクエストに対して何を行うかを説明します。
  • Vite+ElectronでVUE3デスクトップアプリケーションを素早く構築
  • 古い Vue プロジェクトに Vite サポートを追加する方法
  • Vite2.0の落とし穴
  • Vue3.0+vite2は動的非同期コンポーネントの遅延読み込みを実装します
  • vite+vue3+element-plus プロジェクトをビルドする手順
  • Viteの原理を学ぶ

<<:  MySQL でデータをクエリし、条件に基づいて別のテーブルに更新する方法の例

>>:  Tomcatサーバーのセキュリティ設定方法

推薦する

formData 形式タイプを使用してファイルをアップロードする Vue の例

Vue では、一般的にフロントエンドとバックエンドを分離したプロジェクトがあり、データ操作を実装する...

ウェブサイトの画像にグレー効果を加える3つの方法

私はグレースケールの画像の方が芸術的に見えると思うので、いつもグレースケールの画像を好んで使っていま...

nginx を最適化する 6 つの方法

1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...

jsネイティブカルーセルプラグインの制作

この記事では、jsネイティブカルーセルプラグインの具体的なコードを参考までに共有します。具体的な内容...

MySQL IDは1から増加し始め、不連続IDの問題を素早く解決します

mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...

MySQL での SQL モードの表示と設定の詳細な説明

MySQL での SQL モードの表示と設定MySQL はさまざまなモードで実行でき、さまざまなシナ...

JavaScript タイマー原理の詳細な説明

目次1. setTimeout() タイマー2. setTimeout() タイマーを停止する3. ...

MySQLクエリ構文の概要

序文:この記事では主に、MySQL の where、group by、order by、limit、...

HTTP ヘッダー情報の解釈と分析 (詳細概要)

HTTP ヘッダーの説明1. Accept: Web サーバーに受け入れるメディア タイプを通知しま...

スケーラブルな列の完全な例を実現するための Ant 設計 Vue テーブル

ant-design-vue テーブルのスケーラブルな列の問題に対する完璧なソリューション。固定列と...

15 分で学べる並列アーティファクト GNU Parallel 入門ガイド

GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...

HTML入力で値が変更されたときにリスナーイベントを追加することの簡単な分析

達成される効果多くの場合、入力ボックスの値の変化をリアルタイムで監視し、ブラウザを誘導してウェブサイ...

LinuxにMySQLをインストールし、外部ネットワークアクセスを構成する例

設定手順1. DNSが設定されているかどうかを確認するDNSが設定されていない場合は、前の記事を参照...

Windows 10 Home Edition に Docker for Windows をインストールする

0. 背景ハードウェア: Xiaomi Notebook Air 13/Inter Core i7-...

MySql 学習 3 日目: データ テーブル間の接続とクエリの詳細

主キー:キーワード: 主キー機能: null にすることはできず、一意である必要があります。主キーの...