Zenn
💭

Vue CLIを使用したVueプロジェクトの最初期セットアップ

に公開
Vue.js
ESLint
Prettier
normalizcss
tech

概要

現在個人開発プロジェクトとして「IT育成カリキュラム(仮)」の構成を検討しています。
本プロジェクトの概要についてはこちらの記事を合わせてご覧ください。
その中で技術選定をしている途中ではありますが、ある程度固まってきたので備忘も兼ねて最初期のセットアップについてシェアしようと思います。

使用技術

プロジェクトのベースにVue 3.x、テンプレート構築にVue CLIを採用。
フォーマットツールでESLintとPrettierを採用しています。
選定基準は過去プロジェクトでの使用経験があり、感覚的に慣れているというシンプルな理由です。

参考文献

設定手順

node.js、npm or yarnがインストールされている前提で、Vue CLIをインストールします。
（今回はnpmコマンドベースで記載します）

npm install -g @vue/cli

インストールできているか確認、バージョンを参照します。

vue --version

ここまでできていたらプロジェクトを管理するフォルダに移動し、下記を実行します。

vue create [プロジェクト名]

ここからはVUE CLIのセットアップに移ります。
今回下記のように設定を行いました。
スクリーンショット 2022-02-24 16.35.33.png
→自身である程度カスタムしてみたかったため、一番下を選択

スクリーンショット 2022-02-24 16.35.43.png
→画面内リンクやフォーマッターを利用するため「Babel」「Router」「Vuex」「Linter / Formatter」を選択

スクリーンショット 2022-02-24 16.35.51.png
プロジェクトのベースバージョンは「3.x」

スクリーンショット 2022-02-24 16.36.06.png
→あまり理由はないんですがヒストリーモードは「なし」

スクリーンショット 2022-02-24 16.36.14.png
→フォーマットの設定は「Prettier」

スクリーンショット 2022-02-24 16.36.41.png
→Lintのタイミングは作業時よりも任意のタイミングで行いたいため「on commit」時に設定

スクリーンショット 2022-02-24 16.36.49.png
→Babel等各種ライブラリの設定方法。package.jsonは使いません。

ここまでうまくいけばプロジェクトが作成され、npm run serveまたはyarn serveコマンドで
http://localhost:8080/　
にローカルアプリが出力されるようになります。（デフォルトの場合）

スタイルシートの設定手順

最初のセットアップ時、デフォルトでは次のように記述されています。

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

シンプルな構成ならこのままでも構わないですが、規模が大きくなるにつれて管理が大変になってくるのでcss部分は分けたいと思います。
今回sassベースで作りたいので、下記パッケージを導入しました。

# node-sass
npm install node-sass

# sass-loader
npm install sass-loader sass webpack --save-dev

次に上記を任意のscssに移行します。
src/assets/css/style.scss にした場合、合わせてmain.jsに下記記載します。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 下記を追加
import "@/assets/css/style.scss";

createApp(App).use(store).use(router).mount("#app");

さらに「normalize.css」も使いたいので、パッケージからインストールしました。

npm install --save normalize.css

こちらもmain.jsに追記し、最終的には以下の形になります。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 下記を追加
import "normalize.css/normalize.css";
import "@/assets/css/style.scss";

createApp(App).use(store).use(router).mount("#app");

Lint / Prettierのテスティング手順

今回テスティングツールにPrettierを採用していますが、.eslintrc.jsに追記することで任意のルール設定を行うことができます。
例えば「タブ２文字」「シングルクオートなし（＝ダブルクオート）」「セミコロンあり」としたい場合は次のような記述になります。

rules: {
　　：
    // 追加分
    "prettier/prettier": [
      "error",
      {
        tabWidth: 2,
        singleQuote: false,
        semi: true,
      },
    ],
  },

この状態で一度Lintコマンドを実行してみましょう。

npm run lint --fix

自分はここまでで「Login」というコンポーネントを追加し検証していたのですが、このようなエラーが出ていました。

1:1  error  Component name "Login" should always be multi-word  vue/multi-word-component-names

これはプラグイン「multi-word-component-names」によるもので、単独語はコンポーネント名に使えないというものでしたが、自由度を高めたいため公式ドキュメントで参照したignoreリストを追記してコンポーネントと連携させることで解消できました。

src/views/Login.vue
<script>
export default {
  name: "Login",
};
</script>

rules: {
　　：
    // 追加分
    "vue/multi-word-component-names": [
      "error",
      {
        // multi-wordでなくても問題ないコンポーネント名を追加していく
        ignores: ["Login"],
      },
    ],
  },

Discussion