詳細にvite 2.0配置学習（typescriptバージョン）

紹介する
尤于渓の原語。

viteはVue CLIと似ています。viteも基本プロジェクトの足場と開発サーバを提供する構築ツールです。

viteブラウザのオリジナルES importに基づく開発サーバです。パッケージという概念をスキップして、サーバーは必要に応じてコンパイルして返します。

vite速度はwebpackより10+倍速く、熱と新品をサポートしますが、テスト段階にあります。

配置ファイルも熱と新品に対応！！！

作成
npm init@vitejs/apを実行します。ここで選んだのはvue-tsです。

バージョン
「vite」：「^2..0-beta.48」
aliasの別名
vite.co.nfig.ts

const path = require('path')
 alias: {
  "@": path.resolve(__dirname, "src"),
  "@c": path.resolve(__dirname, "src/components")
 },

環境変数の設定
1、ルートディレクトリの作成

2、プレフィックスのみの変数VITE_Vite処理のコードを公開しました。一つは.env.productionファイルであり、その他は類似している。
shell     # 開発環境     VITE_APP_.ENV='development'     # アプリアドレス     VITE_APP_.PATH='dev/…'    
3、ファイルのpackage.jsonを起動して、命令の後に--mode testをつければいいです。これはvue 2と同じです。

"dev:test": "vite --mode test",

4、使って、vue 2とは少し違っていますが、vite.co.nfig.ts内で読み取れないので、他のファイルはもらえます。

import.meta.env

出力:

vue-routerを追加します（vue 3は4.0+バージョンを使用します）。
1、据え付け

npm i [email protected] --save,  4.0  

2、index.ts

import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
// @ts-ignore
const test = () => import('../views/test1.vue')
const routes: Array<RouteRecordRaw> = [
  {path: "/", redirect: "/test1"},
  {
    path: "/test1",
    name: 'test1',
    component: test,
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router

3、メール.ts

import router from "./router"
createApp(App)
  .use(router)
  .mount('#app')

vuexを追加(バージョンは同じ4以上)
1、据え付け

npm i vuex@index -D

2、store/index.ts

import { createStore } from 'vuex'

export default createStore({
 state: {
 },
 //...
})

3、メール.ts

import store from './store'

createApp(App)
  .use(store)
  .mount('#app')

scss環境
1、npm i sass-Dをインストールして、直接sass文法を使うことができます。
2、vite.co nfig.ts、グローバルにscssファイルを導入する

css: {
  preprocessorOptions: {
   scss: {
    additionalData: `@import "./src/assets/scss/global.scss";`//  scss    
   }
  }
 },

ここで、vite 2.0の構成学習（typescriptバージョン）の詳細についての記事を紹介します。もっと関連するvite 2.0の構成内容は以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。