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 は information_schema オブジェクトの付与をバイパスし、ERROR 1044 (4200) エラーを報告します

この質問は、MySQL の権限に関する WeChat グループのネットユーザー間の議論です。次のよう...

Linux nlコマンドの使い方

1. コマンドの紹介nl (行数) は指定されたファイルに行番号を追加し、標準出力に書き込みます。フ...

Docker を使用して MySQL および Redis サービスをデプロイする方法

目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...

Docker Compose のインストールと使用手順

目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...

Docker で Python スクリプトを実行する方法

まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...

MySQLで偽または真を保存する方法

MySQL ブール値、偽または真を格納つまり、データベースに保存されるブール値は 0 と 1 であり...

Vue3とTypeScriptを組み合わせたプロジェクト開発の実践の概要

目次概要1. コンポジションAPI 1. ref と reactive の違いは何ですか? 2. 周...

Webデザイナーの成長体験

<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...

Vueでフォーム検証を実装する方法

1. インストールと使用まず、Vue プロジェクトにインストールします。 npm インストール --...

Webフロントエンドスキル概要(個人の実務経験)

1. 今日、ページを作っているときに、矢印を中央に配置する効果に遭遇しました。クリック領域を大きくし...

Linux で Nginx 1.16.0 をインストールするための詳細なチュートリアル

最近 Linux をいじっていたので、nginx の新しいバージョンをインストールしたいと思いました...

Vue は水の波紋効果のクリックフィードバック指示を実装します

目次水波効果実装を見てみましょう水の波紋のデフォルトスタイルをカスタマイズする水の波紋の位置と直径を...

HTML 名 ID とクラスの違い_PowerNode Java アカデミー

名前タグの名前を指定します。形式 <input type="text" n...

GolangでMySQLデータベースのバックアップを実装する方法

背景Navicat は、最高の MySQL 視覚化ツールです。ただし、ビューのインポートとエクスポー...

Web フロントエンドのパフォーマンス最適化の詳細説明: リソースのマージと圧縮

2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...