BLOG

ブログ

【Vite + Vue3】Templateプロジェクト作ってみた

こんにばちんわ。
バックエンド担当しております、TO★MO☆KI★彡です。
最近はカタールW杯が間近に控えているので、ワクワク毎日を過ごしてます。

今回は、【Vite + Vue3(Vue.Router) + Typescript + Sass】のTemplateプロジェクトを作成しました。
経緯としては、
フロントの開発が増えてきて、何か試したい時にチャチャッと動かせるオリジナルのTemplateを欲しかったからです。

Viteとは?の方は、以前に箱崎さんがViteの記事を投稿しているのでそちらの一読オススメします。
Viteを使ってVueやNuxtを動かしてみた

それでは、完成品を先にお披露目します。
Githubリポジトリ

シンプル・イズ・ベスト

mixinやscss変数など設定見たい方はリポジトリのCloneを推奨します。
⚠注意:本文で作成するものとはファイル内容など異なりますのでご注意ください。(大枠は同じです

目次

動作環境

node16.10.0
yarn1.22.19
vite3.2.3
動作環境

Viteプロジェクト生成

下記コマンドを実行し質問に回答していく

yarn create vite
質問回答
初期ディレクトリ構成図

Customize with create-vue ↗ を選択すると、色々カスタマイズできます。

VSCodeプラグイン設定

Volarインストール

vscodeを開いてCommand + Shift + X で拡張機能検索欄へ移動し、「Volar」と入力してください。
おそらく一番上に表示されると思いますのでインストールします。

こちらインストールします

Veturインストールしている場合

Veturを無効化する必要があります。
Command + Shift + X で拡張機能検索欄へ移動しインストール済みの中から「Vetur」探してください。
「Vetur」の右下の歯車アイコンを押下し、「無効にする(ワークスペース)」を押下で完了です。

Vetur無効化

importは絶対パスで読み込みたい!

✗ : import Hoge ../../***/***.vue

○ : import Hoge @/***/***.vue

vueファイルなどなどのimportを行う際は相対パスではなく、絶対パスで呼べるように修正します。

tsconfig.jsonを変更

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    // 追加↓
    "baseUrl": ".",
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
   // 追加↑
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.tsを変更

pathでエラー生じるので、@types/nodeをインストールしましょう。

yarn add -D @types/node
import { defineConfig } from "vite";
import path from "path"; // 追記
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 追記
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});


このステップを飛ばす場合は、import箇所を相対パスで書く必要があるのでご注意ください⚡

ここまでで正常に表示されるか確かめます。

yarn dev --open
正常に表示されました

Sass導入 ✗ 設定

さあ、サクッとSassを導入していきましょう!
(CSS設計などには触れませんので、別の方の記事をみてください。

Sassインストール

yarn add -D sass

ディレクトリ構成

上記ディレクトリ構成にする

プロジェクト直下で以下コマンドを叩きます。
中身のscssファイルはお好みで調整してください。

mkdir -p src/assets/{scss,img} && touch src/assets/scss/{style,_breakpoint,_color,_mixin,_reset,_variables}.scss

ファイル補足説明

  • _breakpoint.scss
    • ブレークポイントの変数定義
  • _color.scss
    • 色の変数定義
  • _mixin.scss
    • mixinの定義
  • _reset.scss
  • variables.scss
    • breakpoint,color,mixin.scssはここでimportする
    • グローバル適用するファイル
  • style.scss
    • 最初のimportファイルは_reset.scssであること
    • main.tsでimportする

Sass変数などをグローバル適用する

vite.config.tsに設定追加

export default defineConfig({
  plugins: [vue()],
  // 追加
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/scss/_variables.scss";`,
      },
    },
  },
});

main.ts修正

import { createApp } from "vue";
import "@/assets/scss/style.scss"; // 追記
import App from "./App.vue";

createApp(App).mount("#app");

修正と同時にsrc/style.cssは不要なので削除しておきます。

Vue.Router導入 ✗ 設定

Customize with create-vue ↗ を選択すると、カスタマイズ項目にVue.Routerの選択があるので、そちらで行ったほうが早いです。
今回は手動導入✗設定します。

Vue.Routerインストール

yarn add vue-router

設定

必要なディレクトリとファイルの作成

mkdir -p src/{router,pages} && touch src/router/index.ts src/pages/Top.vue

以下ファイルを書き換え

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "top",
    component: async () => {
      return await import("@/pages/Top.vue");
    }
  }
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;
<script setup lang="ts"></script>

<template>
  <h1>TOP ページ</h1>
</template>

<style lang="scss" scoped></style>

import { createApp } from "vue";
import "@/assets/scss/style.scss";
import App from "./App.vue";
import router from "@/router";

const app = createApp(App);

app.use(router);
app.mount("#app");
<script setup lang="ts"></script>

<template>
  <RouterView />
</template>

<style lang="scss" scoped></style>

完成品の動作確認

yarn dev --open
完成

味気ないので、bodyの背景を変えてみたいと思います。

body {
  background-color: gray;
}
背景変えてみた

最後に

最後まで、お付き合いいただきありがとうございます。
非常にシンプルな構成でのご紹介でしたが、とても簡単にWEB開発ができるのではないでしょうか。

今後は、バックエンド&インフラ側のテンプレートの作成にも挑戦したいと思います。
また、皆様の良きテンプレートがあれば教えていただきたいです!

Twitterフォローお願いします⭐

RELATED ARTICLE