Viteは発売から時間が経ち、新バージョンはより安定しているので、この記事をおすすめします。

......

I. ヴァイトの紹介

Vite（フランス語で "fast"、発音は /vit/）は、フロントエンドの開発体験を大幅に向上させる、モダンブラウザ用の軽量で高速なフロントエンドビルドツールです。現在、ViteはVite2をリリースしており、Viteの新しいプラグインアーキテクチャ、絹のように滑らかな開発経験、そしてVue3と完璧に組み合わせることが可能です。

1.1 Viteの構成

ビルドツールViteは、2つの部分から構成されています。

• ホットモジュールアップデート（HMR）など、ESのネイティブモジュールに基づく豊富な組み込み機能を提供する開発サーバーです。

• Rollupを使用してコードをパッケージ化し、本番環境に最適化された静的リソースを出力するようにあらかじめ設定されたビルド命令セットです。

全体として、Vite はすぐに使える設定を提供したいと考え、そのプラグイン API と JavaScript API は高い拡張性をもたらしています。しかし、Vue-cliの設定と比較すると、Viteは開発者が自分で処理しなければならない多くの設定でプロジェクトを構築しています。

1.2 ブラウザ対応

• 開発環境において。Viteは、ネイティブESモジュールの動的インポートをサポートするブラウザで使用する必要があります。

• 実稼働環境では: デフォルトでサポートされているブラウザは、script タグによるネイティブ ES モジュールの導入をサポートする必要があります。古いブラウザは、公式プラグイン @vitejs/plugin-legacy を介してサポートすることができます。

II. 環境構築

2.1 プロジェクトの作成

Viteのウェブサイトによると、Viteプロジェクトを初期化するにはnpmまたはyarnを使用し、Node.jsのバージョンは>= 12.0.0である必要があるとのことです。

NPMの方法を使用する

npm init vite@latest project name

Yarnメソッドを使用する

yarn create vite project name

これに加えて、追加のコマンドラインオプションにより、プロジェクト名とテンプレートを直接指定することができます。例えば、Vite + Vueのプロジェクトをビルドする場合、コマンドは次のようになります。

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, requires additional double horizontal lines.
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

コマンドを入力したら、プロンプトに従います。TypeScriptに対応する必要がある場合は、プロジェクトの初期化時にvue-tsを選択します。プロジェクトが作成されると、Viteで作成されたプロジェクトのディレクトリ構造が、実はVue-cliで作成されたものと似ていることが確認できます。

2.2 Vue-Routerの統合

2.2.1 Vue-Routerのインストールと設定

Vue-Routerはすでにほとんどのフロントエンドのプロジェクトで必須のルーティングツールとして使われており、Vue-Routerはシングルページのアプリをより簡単に構築できるようにします。まず、以下のインストールコマンドで、プロジェクトにVue-Routerをインストールします。

//npm
npm install vue-router@next --save

//yarn
yarn add vue-router@next --save

インストールが完了したら、src ディレクトリに router/index.ts フォルダを作成し、以下のように設定を追加します。

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: () => import('views/home.vue') }
  ]
});

export default router

次に、main.ts ファイルで、以下のように Vue-Router を導入します。

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

2.2.2 新しいルーティングページを追加する

マスキングを容易にするために、さらに2つの新しいルートページを追加します。慣れるために、pages フォルダを作成し、表示する必要のあるページを作成し終えてください。そして、次のように新しいページを router/index.ts に登録します。

routes: [
        {
            path: "/home",
            name: "Home",
            alias: "/",
            component: () => import(". /pages/Home.vue")
        },
    ]

次に、App.vueのコードをもう少し修正して、次のようにしましょう。

<template>
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App'
})
</script>

次に、サービスを起動すると、設定されたページが表示され、クリックすることで該当するページにジャンプできるようになります。

2.3 Vuexの統合

Vuexは、Vue.jsアプリケーションのために特別に開発された状態管理パターンです。これは、アプリケーションのすべてのコンポーネントの状態を管理するために集中ストアを使用し、状態が予測可能な方法で変更されることを保証するためのルールで、ゼロ構成タイムトラベルデバッグ、状態のスナップショットのインポートおよびエクスポートなどの高度なデバッグ機能です。

Vuexを使用する前に、以下のように、Vuexプラグインをインストールする必要があります。

//npm
npm install vuex@next --save

//yarn
yarn add vuex@next --save

インストール後、Vuexを初期化する必要があります。まず、store/index.ts ファイルを作成し、以下のコードを追加します。

import { createStore } from "vuex";

const store = createStore({
  modules: {
    home: {
      namespaced: true,
      state: {
        count: 1
      },
      mutations: {
        add(state){
          state.count++;
        }
      }
    }
  }
})

export default store;

上記のコードは、簡単な自己追加関数を実装するためのものである。そして、main.js ファイルで Vuex を導入します。

import { createApp } from 'vue';
import App from '. /App.vue';

import store from ". /store";

const app = createApp(App);
app.use(store);
app.mount('#app');

ここまでできたら、Vuexのテストコードを書いて、Vuexが動くかどうか確認しましょう。Home.vueのコードを以下のように修正します。

<template>
  <h1>Home Page</h1>
  <h2>{
{count}}</h2>
  <button @click="handleClick">click</button>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  setup () {
    const store = useStore();
    const count = computed(() => store.state.home.count);
    const handleClick = () => {
      store.commit('home/add');
    };
    return {
      handleClick,
      count
    };
  }
})
</script>

上記のコードは、Vuexを使用する以外は、デフォルトのサンプルプロジェクトと同じように動作する、シンプルな自己追加関数を実装しています。

2.4 Eslintの統合

ESLintは、ECMAScriptの構文を識別し、低レベルのエラーを回避し、コードスタイルを標準化するためにルールに従って報告するコード検査ツールです。Eslint を統合するには、以下のようないくつかのプラグインをインストールする必要があります。

npmのアプローチ

npm install eslint -D
npm install eslint-plugin-vue -D
npm install @vue/eslint-config-typescript -D
npm install @typescript-eslint/parser -D
npm install @typescript-eslint/eslint-plugin -D
npm install typescript -D
npm install prettier -D
npm install eslint-plugin-prettier -D
npm install @vue/eslint-config-prettier -D

yarnのアプローチ

yarn add eslint --dev
yarn add eslint-plugin-vue --dev
yarn add @vue/eslint-config-typescript --dev
yarn add @typescript-eslint/parser --dev
yarn add @typescript-eslint/eslint-plugin --dev
yarn add typescript --dev
yarn add prettier --dev
yarn add eslint-plugin-prettier --dev
yarn add @vue/eslint-config-prettier --dev

また、インストール完了後、以下のようにルートディレクトリに.eslintrcファイルを作成する必要があります。

{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2021
  }
}

設定ルールを追加した後、package.jsonファイル内のスクリプトに以下のコマンドも追加する必要があります。

{
    "lint": "eslint --ext src/*/*. {ts,vue} --no-error-on-unmatched-pattern"
}

次に yarn lint と入力すれば、eslintによるフォーマットのチェックサムが完了します。しかし yarn lint ファイル数が多い場合は、検証するのに非常に時間がかかると思います。
それなら、lint-stagedプラグインを使う必要があります。

//npm
npm install lint-staged -D
//yarn 
yarn add lint-staged --dev

次に、package.jsonを以下のように変更します。

{
  "gitHooks": {
    "commit-msg": "node scripts/commitMessage.js",
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*. {ts,vue}": "eslint --fix"
  },
  "scripts": {
    "test:unit": "jest",
    "test:e2e": "cypress open",
    "test": "yarn test:unit && npx cypress run",
    "lint": "npx prettier -w -u . && eslint --ext .ts,.vue src/** --no-error-on-unmatched-pattern",
    "bea": "npx prettier -w -u . "   
  },
}

2.5 エイリアスを設定する

過去にvue-cliを使用した際、特定のファイルを紹介する際に必ず@を使用していましたが、Viteでは同様の設定ができないため、@マークを使用して素早くファイルを紹介し続けるためには、手動で設定する必要があります。まず、vite.config.tsの設定を変更する必要があります。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { join } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: '/src',
      },
      { find: 'views', replacement: '/src/views' }, { find: 'components', replacement: '/src/components' }, }
      { find: 'components', replacement: '/src/components' }, { find: 'components', replacement: '/src/components' }
    ]
  }
});

そして、tsconfig.jsonファイルを以下のように修正します。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
   
   // The following is what needs to be added
    "types": ["vite/client", "jest"],
    "baseUrl": ". ",
    "paths": {
      "@/*": ["src/*"]
    } 
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ]
}

2.6 エレメント・プラスの統合

エレメントプラスは、Vue 3.0ベースのコンポーネントライブラリのセットで、開発者、デザイナー、プロダクトマネージャーのために、Hungry Big Front Endチームのオープンソースで制作され、開発者が迅速にウェブサイトを開発できるようにします。

まず、プロジェクトのルートディレクトリに、以下のコマンドでelement-plusをインストールします。

npm install element-plus --save

2.6.1 element-plusの導入

必要に応じて、element-plus全体、あるいは一部のコンポーネントだけを導入することができます。すべて導入する場合は、main.jsに以下のコードを追加するだけです。

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
i

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

プロジェクトのパッケージサイズを小さくしたい場合は、対応する機能コンポーネントを導入するだけでよいでしょう。まず、以下のようにbabel-plugin-componentプラグインをインストールします。

npm install babel-plugin-component --save

次に、.babelrcの設定内容を変更します。

{
  "plugins": [
    [
      "components",
      {
        "libraryName": "element-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

ButtonコンポーネントやSelectコンポーネントなど、一部のコンポーネントを導入するだけなら、以下のようにmain.jsで対応するコンポーネントを導入する必要があります。

import { createApp } from 'vue'
import { store, key } from '. /store';
import router from ". /router";
import { ElButton, ElSelect } from 'element-plus';
import App from '. /App.vue';
import '. /index.css'

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);

/* or
 * app.use(ElButton)
 * app.use(ElSelect)
 */

app.use(store, key)
app.use(router)
app.mount('#app')

2.6.2 設定を追加する

Element Plusを導入した後、グローバル設定オブジェクトを追加します。このオブジェクトは現在sizeとzIndexフィールドをサポートしています。sizeはコンポーネントのデフォルトサイズを変更するために使用し、zIndexはポップアップボックスの初期zインデックスを設定します。ここでは、2種類の導入方法を紹介します。

グローバルに紹介します。

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from '. /App.vue';

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 });

オンデマンドを導入する。

import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import App from '. /App.vue';

const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);

2.6.3 プロキシとエイリアスを設定する

Viteでaliasのエイリアス設定とproxyのプロキシ設定を使いたい場合は、vite.config.tsファイルで別々に設定する必要があります。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        }
      ]
    })
  ],

  /**
   * The base public path when serving in production.
   * @default '/'
   */
  base: '. /',
  /**
  * The directory associated with the "root" where the build output will be placed. If the directory exists, it will be removed before the build.
  * @default 'dist'
  */
  // outDir: 'dist',
  server: {
    // hostname: '0.0.0.0',
    host: "localhost",
    port: 3001,
    // // Whether to automatically open in the browser
    // open: true,
    // // whether https is enabled
    // https: false,
    // // server-side rendering
    // ssr: false,
    proxy: {
      '/api': {
        target: 'http://localhost:3333/',
        changeOrigin: true,
        ws: true,
        rewrite: (pathStr) => pathStr.replace('/api', '')
      },
    },
  },
  resolve: {
    // Import folder alias
    alias: {
      '@': path.resolve(__dirname, '. /src'),
      views: path.resolve(__dirname, '. /src/views'),
      components: path.resolve(__dirname, '. /src/components'),
      utils: path.resolve(__dirname, '. /src/utils'),
      less: path.resolve(__dirname, ". /src/less"),
      assets: path.resolve(__dirname, ". /src/assets"),
      com: path.resolve(__dirname, ". /src/components"),
      store: path.resolve(__dirname, ". /src/store"),
      mixins: path.resolve(__dirname, ". /src/mixins")
    },
  }
})

ここで、vite-plugin-style-importは、オンデマンドでスタイルを導入することができるライブラリです。

III. データのリクエスト

Vue自体はajaxの呼び出しをサポートしていないので、ネットワークリクエストを行う必要がある場合は、superagentやaxiosなどのツールを使う必要がありますが、Vue開発者はaxiosの方がよく使っているようです。

//npm
npm insall axios -save

//yarn 
yarn add axios -save

次に、新しいrequest.tsを作成し、以下のコードを追加します。

import axios from 'axios';

let request = axios.create({
    baseURL: 'http://localhost:3555/api'
})

export default request;

次に、次のような特定の Web リクエストを処理するための新しい index.ts が作成されます。

import request from ". /axios";

export const getUrl = () => {
    return request({
        url: "/users/test" // request address
    })
}

export default { getUrl };

最後に、ページコードの中で上で定義したインターフェイスを呼び出すだけです。

import { getUrl } from ". /api/index"

export default {
    setup() {
        const getUrls = async() =>{
            const res = await getUrl()
            console.log(res)
        }
        onMounted(() => { 
            getUrls()
        })
    }
}

---

この記事について

著者：Xiangzhihong

出典 SegmentFault SiFuコミュニティ

おすすめの読み物

YudaはなぜWebpackを捨てたのか - Viteを探る

以下の「フロントエンド開発ブログ」をフォローし、「グループ追加」と返信してください。

私たちと一緒に学び、毎日をより良くしましょう

この記事もやっぱりいいなと思ったら、より多くの人に見てもらえるように【シェア・いいね・見る】の三連発をしましょう〜。