プロジェクトを素早く構築するためのvite+vue3.0+ts+element-plusの実装

npm init vite-app <プロジェクト名>
cd <プロジェクト名>
npmインストール
npm 実行 dev

yarn create vite-app <プロジェクト名>
cd <プロジェクト名>
糸
糸開発

「path」からパスをインポートします。

const pathResolve = (pathStr: 文字列) => {
  path.resolve(__dirname, pathStr) を返します。
}

定数設定 = {
  base: './', // 本番環境で提供する際の基本パブリックパス。 @デフォルト '/'
  エイリアス: {
    '/@/': パスを解決します('./src'),
  },
  outDir: 'vite-init', // ビルド出力が配置される場所。ビルド前に古いディレクトリは削除されます。 @default 'dist'
  minify: 'esbuild', //ビルド時の圧縮方法 hostname: 'localhost', //ローカルサービスアドレス port: '8800', //サービスポート番号 open: false, //サービス起動時にブラウザでhttpsを開くかどうか: false, //httpsを開くかどうか
  ssr: false, //サーバー側でレンダリングするかどうか optimizeDeps: { //サードパーティの設定を導入 include: ['axios']
  },
  // proxy:{// プロキシ設定 // '/api': {
  // ターゲット: 'http://xx.xx.xx.xx:xxxx',
  // 変更元: true、
  // ws: true、
  // 書き換え: (path: string) => { path.replace(/^\/api/, '') }
  // }
  // }
}
モジュールをエクスポートします。

{
  "コンパイラオプション": {
    "target": "ES5", // ECMAScript のターゲット バージョンを指定します: 'ES3' (既定値)、'ES5'、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020'、または 'ESNEXT'。
    "module": "commonjs", // モジュール コード生成を指定します: 'none'、'commonjs'、'amd'、'system'、'umd'、'es2015'、'es2020'、または 'ESNext'。
    "strict": true, // すべての厳密な型チェック オプションを有効にするかどうか。
    "baseUrl":"./", // 絶対でないモジュール名を解決するために使用されるベース ディレクトリ。
    「パス」: {
      "/@/*": ["./src/*"]
    },  
    "noImplicitAny": true, //暗黙的な 'any' 型を持つ式と宣言に対してエラーを発生させます。
    "esModuleInterop": true, //すべてのインポートに対して名前空間オブジェクトを作成して、CommonJS モジュールと ES モジュール間の相互運用性を有効にします。 「allowSyntheticDefaultImports」を意味します。
    "experimentalDecorators": true, // ES7 デコレータの実験的なサポートをサポートします。
    "skipLibCheck": true, //宣言ファイルの型チェックをスキップします。
    "forceConsistentCasingInFileNames": true // 同じファイルへの大文字と小文字の不一致な参照を無効にします。
  }
}

<テンプレート>
  <img alt="Vue ロゴ" src="./assets/logo.png" />
  <ルータービュー />
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
  設定（） {

  }
}
</スクリプト>

<テンプレート>
  <HelloWorld :msg="メッセージ"></HelloWorld>
</テンプレート>

<script lang="ts">
「/@/views/HelloWorld.vue」からHelloWorldをインポートします。
「vue」からdefineComponentをインポートします。
エクスポートデフォルトdefineComponent({
  名前: "ホーム",
  コンポーネント: { HelloWorld },
  設定（） {
    戻る {
      メッセージ: 「こんにちは世界」、
    };
  },
});
</スクリプト>

<テンプレート>
  <h1>{{ メッセージ }}</h1>
  <button @click="realTime.count++">カウントは: {{ realTime.count }}</button>
  <button @click="handleclick">クリックすると他のルートにジャンプします</button>
  <p>ホット モジュール置換をテストするには、<code>components/HelloWorld.vue</code> を編集します。</p>
</テンプレート>

<スクリプト>
「vue」から、defineComponent、reactive をインポートします。
'vue-router' から { useRouter } をインポートします。
エクスポートデフォルトdefineComponent({
  名前: 'インデックス'、
  プロパティ: { メッセージ: { タイプ: 文字列、デフォルト: 'vue3 へようこそ' } },
  セットアップ(プロパティ) {
    定数ルーター = useRouter();
    realTime = reactive({ count: 0 } とします);

    関数handleclick() {
      router.push({ パス: '/other' })
    }
    戻る {
      メッセージ: props.msg、
      リアルタイム、
      ハンドルクリック
    }
  }
})
</スクリプト>

'vue-router' から {createRouter、createWebHistory、RouteRecordRaw} をインポートします。

const ルート: Array<RouteRecordRaw> = [
  {
    パス： '/'、
    コンポーネント: () => import("/@/views/index.vue")
  },
]

エクスポートデフォルトcreateRouter({
  履歴: createWebHistory(),
  ルート
})

'vue' から {createApp} をインポートします。
'./router/index' からルーターをインポートします
'./App.vue' からアプリをインポートします。
'element-plus' から ElementPlus をインポートします

'element-plus/lib/theme-chalk/index.css' をインポートします。
'./reset.css' をインポートします

const app = createApp(App);
app.use(ElementPlus);
app.use(ルーター);
app.mount('#app');

モジュール '*.vue' を宣言します { }
モジュール '*.js' を宣言します
モジュール '*.json' を宣言します。
モジュール '*.svg' を宣言します
モジュール '*.png' を宣言します
モジュール '*.jpg' を宣言します
モジュール '*.jpeg' を宣言します
モジュール '*.gif' を宣言します
モジュール '*.bmp' を宣言します
モジュール '*.tiff' を宣言します