導入悠宇希の原文です。
作成する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 ファイルであり、他のファイルも同様です。 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構文を直接使用できます。 css: { プリプロセッサオプション: { SCSS: { additionalData: `@import "./src/assets/scss/global.scss";` //scssファイルのパス} } }, vite2.0 設定学習の詳細説明 (typescript 版) に関するこの記事はこれで終わりです。vite2.0 設定に関するより関連性の高い内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQL の制限使用法とページングクエリステートメントのパフォーマンス分析の詳細な説明
この質問は、MySQL の権限に関する WeChat グループのネットユーザー間の議論です。次のよう...
1. コマンドの紹介nl (行数) は指定されたファイルに行番号を追加し、標準出力に書き込みます。フ...
目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...
目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...
まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...
MySQL ブール値、偽または真を格納つまり、データベースに保存されるブール値は 0 と 1 であり...
目次概要1. コンポジションAPI 1. ref と reactive の違いは何ですか? 2. 周...
<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...
1. インストールと使用まず、Vue プロジェクトにインストールします。 npm インストール --...
1. 今日、ページを作っているときに、矢印を中央に配置する効果に遭遇しました。クリック領域を大きくし...
最近 Linux をいじっていたので、nginx の新しいバージョンをインストールしたいと思いました...
目次水波効果実装を見てみましょう水の波紋のデフォルトスタイルをカスタマイズする水の波紋の位置と直径を...
名前タグの名前を指定します。形式 <input type="text" n...
背景Navicat は、最高の MySQL 視覚化ツールです。ただし、ビューのインポートとエクスポー...
2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...