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 をよろしくお願いいたします。