プロジェクトを素早く構築するための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サーバーのセキュリティ設定方法

推薦する

ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要

新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...

Windows に mysql5.7.28 winx64 の解凍バージョンをインストールするための詳細なチュートリアル

目次1. 解凍する2. データフォルダを作成する3. MySQLに環境変数を追加する3.1 コントロ...

Linux サーバーでの MySQL インストール情報の表示

mysql のインストール情報を表示します。 #ps -ef | grep mysql usr/bi...

航空機戦争ゲームを実装するためのJavaScript

この記事では、キャンバスとjsを使用して簡単な飛行機戦争を実装する方法を参考までに紹介します。具体的...

Vueは要素ツリーコントロールを通じてツリーテーブルを実装します

目次実装効果図依存関係をインストールするカスタムツリーコントロールその他の実装要約するVueでは、要...

Centos7でのMySQLインストールチュートリアル

MySQLインストールチュートリアル、参考までに具体的な内容は次のとおりです。 1. ダウンロードY...

CSS スタイル分類入門(基礎知識)

CSSスタイルの分類1. 内部スタイル ---- インラインスタイルスタイルタグの使用 <ス...

Alibaba Cloud Ubuntu 16.04 が IPSec サービスを構築

IPSec の概要IPSec (インターネット プロトコル セキュリティ): ネットワーク層と適用さ...

HTML で入力テキスト入力キャッシュのクリアを禁止する 2 つの方法

ほとんどのブラウザはデフォルトで入力値をキャッシュし、ctl+F5 を使用して強制的に更新することに...

テキストスクロール後の自動停止効果の例

効果は非常にシンプルで、次のコードを自分のページにコピーして実行するだけです。コードをコピーコードは...

MySQLインスタンスが起動できない問題の分析と解決

目次序文シナリオ分析要約する序文数日前、友人がWeChatで私に連絡してきて、マシンがダウンタイムか...

nginx のインストールが完了した後に PHP を解析できない問題の解決方法

目次方法1方法2 nginxをインストールした後、PHPコードを解析できないことがわかりました。解決...

CSS3 は反転可能なホバー効果を実現します

CSS3 は反転可能なホバー効果を実装します。具体的なコードは次のとおりです。 1.css /*基本...

Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能

序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...

経験豊富な人が、プロフェッショナルで標準化されたMySQL起動スクリプトの開発方法を紹介します。

シェル スクリプト言語は、すべてのプログラミング言語の中で最も単純な言語であるため、資格のある Li...