🖥tty×Dev個人開発のゆるーいアウトプット

Vue + Vuex + Vue Router + Vuetifyの環境を構築する

2022/10/28

2019/05/26

はじめに

この記事では、vue-cliを用いて Vue + Vuex + Vue Router + Vuetifyの環境を構築する方法を紹介します。

vue-cliのインストール

Vueテンプレートを作成するためのコマンドラインインタフェースをインストールします。

$ npm install -g @vue/cli

2.x系がインストールされている場合は、一度アンインストールしてから最新版をインストールしてください。

$ npm list -g @vue/cli        # バージョンの確認
$ npm uninstall -g vue-cli    # アンインストール
$ npm install -g @vue/cli     # 最新バージョンのインストール

プロジェクトの作成

vue-cliを用いてプロジェクトを作成します。

$ vue create {project-name}

以下の設定でプロジェクトを作成しました。

設定項目

1. Please pick a preset:

プロジェクトに関する各設定項目のプリセットを選択します。

Manually select features: 手動で各項目の設定

また、手動で選択した項目は保存することが可能です。

2. Check the features needed for your project:

プロジェクトに導入する機能を選択します。

今回は以下の機能を選択しました。それぞれの機能については割愛します。

Babel
Vue Router
Vuex（Vue Store）
Linter

3. Use history mode for router?

Vue RouterのHistoryモードを設定するかどうかです。

有効にすることでURL上の表示を一般的な形にすることができます。

参考：https://router.vuejs.org/ja/guide/essentials/history-mode.html

4. Pick a linter / formatter config:

その名の通り、linter, formatterの構成を選択します。

5. Pick additional lint features:

lintの動作に関する設定を選択します。

Lint on save: ファイル保存時にlinter動作

6. Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

各機能の設定をどこに作成するかを選択します。

In dedicated config files: それぞれの設定ファイルを作成

7. Save this as a preset for future projects?

今回の設定項目をテンプレートととして保存するかどうかを選択します。

保存する場合は名前を決めることができます。

プロジェクトの大枠完成

🎉  Successfully created project wp-project.
👉  Get started with the following commands:
 
$ cd wp-project
$ npm run serve

設定が完了すると上記の出力がされ、プロジェクトが完成しています。

Vuetifyの適用

プロジェクトの大枠ができたので、CSSフレームワークを導入します。

今回は、 Vuetify というマテリアルデザインのフレームワークを導入します。

Vuetify — A Vue Component Framework — Vuetify

VuetifyはVue用のオープンソースのUIコンポーネントフレームワークで、デザインスキルを必要としません。美しくコンテンツ豊富なWebアプリケーションに必要な全てのツールを提供します。

$ vue add vuetify

途中で選択を求められますが、 Defalut(recommended) で構いません。

作成が完了すると、以下のファイルが出力されています。

plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
 
Vue.use(Vuetify, {
  iconfont: 'md',
})

main.js にもimport文が追加されています。

ESLint + Prettierの適用

この時点ではlinterのルールが微妙なので、以下のように色々怒られてます。

eslintのルールとprettierのルールがそれぞれあるので、問題なく動くように .eslintrc.js を編集します。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        // Prettierのルール設定
        semi: true,
        singleQuote: true,
        bracketSpacing: true,
        trailingComma: 'es5',
        jsxBracketSameLine: true,
        arrowParens: 'avoid',
      },
    ],
    // ESLintのルール設定
    'no-console': 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};