vite2.0 設定学習の詳しい説明(typescript 版)

vite2.0 設定学習の詳しい説明(typescript 版)

導入

悠宇希の原文です。

  • vite は Vue CLI に似ています。vite も、基本的なプロジェクト スキャフォールディングと開発サーバーを提供するビルド ツールです。
  • vite は、ブラウザネイティブの ES インポートに基づいた開発サーバーです。パッケージ化の概念をスキップすると、サーバーは要求に応じてコンパイルして返します。
  • Vite は webpack よりも 10 倍以上高速で、ホット アップデートをサポートしていますが、まだテスト段階です。
  • 構成ファイルもホットアップデートをサポートします。 ! !

作成する

npm init @vitejs/appを実行します。ここではvue-tsを選択します。

バージョン

"vite": "^2.0.0-beta.48"

エイリアス

vite.config.ts

定数パス = require('path')
 エイリアス: {
  "@": path.resolve(__dirname, "src"),
  "@c": path.resolve(__dirname, "src/components")
 },



環境変数の設定

1. ルートディレクトリに作成する

2. VITE_ というプレフィックスが付いた変数のみが、Vite によって処理されるコードに公開されます。以下は .env.production ファイルであり、他のファイルも同様です。
シェル # 開発環境 VITE_APP_ENV = 'development' # API アドレス VITE_APP_PATH = 'dev/...'

3. package.jsonファイルを起動し、コマンドの後に--mode testを追加します。これはvue2と同じです。

"dev:test": "vite --mode テスト",

4. 使い方はvue2と若干異なります。vite.config.tsでは読み込めませんが、他のファイルは取得できます

インポート

出力は次のようになります。

vue-router を追加します (vue3 はバージョン 4.0 以降を使用します)

1. インストール

npm i [email protected] --save、バージョン4.0をインストール

2. インデックス.ts

'vue-router' から {createRouter、createWebHashHistory、RouteRecordRaw} をインポートします。
// @ts を無視
const test = () => import('../views/test1.vue')
const ルート: Array<RouteRecordRaw> = [
  {パス: "/", リダイレクト: "/test1"},
  {
    パス: "/test1",
    名前: 'test1',
    コンポーネント: テスト、
  }
]
const ルーター = createRouter({
  履歴: createWebHashHistory(),
  ルート: ルート
})

デフォルトルーターをエクスポートする

3. メイン.ts

「./router」からルーターをインポートします。
アプリを作成します(アプリ)
  .use(ルーター)
  .mount('#app')

vuex(バージョン4以上)を追加する

1. インストール

npm i vuex@index -D

2. ストア/インデックス.ts

'vuex' から {createStore} をインポートします。

エクスポートデフォルトcreateStore({
 州: {
 },
 //...
})

3. メイン.ts

'./store' からストアをインポートします

アプリを作成します(アプリ)
  .use(ストア)
  .mount('#app')

scss環境

1. npm i sass -Dをインストールすると、sass構文を直接使用できます。
2. vite.config.ts、scssファイルのグローバルインポート

css: {
  プリプロセッサオプション: {
   SCSS: {
    additionalData: `@import "./src/assets/scss/global.scss";` //scssファイルのパス}
  }
 },

vite2.0 設定学習の詳細説明 (typescript 版) に関するこの記事はこれで終わりです。vite2.0 設定に関するより関連性の高い内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vite2.0+vue3 モバイルプロジェクトの詳細な説明
  • Vite2.0の落とし穴

<<:  Linuxの基本コマンドmktempの詳しい説明

>>:  MySQL の制限使用法とページングクエリステートメントのパフォーマンス分析の詳細な説明

推薦する

インデックススキャンを使用したMySQLソート

目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...

jsはシンプルな計算機を実装します

参考までに、ネイティブjsを使用して簡単な計算機(詳細なコメント付き)を実装します。具体的な内容は次...

Docker+jenkins+python3環境を使用して非常に詳細なチュートリアルを構築する

序文:自動化を記述した後、毎日サーバー上で実行する必要があります。このような問題に遭遇しました。Je...

Nodejs がイントラネット侵入サービスを実装

目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...

Reactの状態の理解についての簡単な分析

複雑なコンポーネント (クラス コンポーネント) と単純なコンポーネント (関数コンポーネント) を...

VMware Workstation と vSphere 間で仮想マシンを移行する (画像とテキスト)

1. Workstationで仮想マシンのハードウェアバージョンを変更するWorkstation ...

要素の高さを下から上へ、上から下へ制御する CSS メソッド

よくある質問から議論を始めましょう。CSS を使用して要素の高さを [ブラウザ コンテンツ ウィンド...

Windows 10 で MySql の解凍バージョンをインストールして構成する方法のチュートリアル

Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...

Linuxの基本コマンドmktempの詳しい説明

mptemp は安全な方法で一時ファイルまたはディレクトリを作成します。このコマンドの適用範囲: R...

Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル

1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...

Reactフック入門チュートリアル

ステートフック例: 'react' から useState をインポートします。 関...

ウェブページの読み込み速度を上げる25の方法とヒント

はじめに<br />誰もが高速インターネット接続にアクセスできるわけではありません。たと...

JavaScriptは入力ボックスコンポーネントを実装します

この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...

webpack イメージを base64 に変換する例

url-loader をダウンロード 糸を追加 -D URLローダー モジュール: { ルール: {...

CSS の画像パスの問題に関する議論 (同じパッケージ/異なるパッケージ)

CSS ファイルでは、背景を使用する、つまり背景画像を追加する必要がある場合があります。これは通常、...