vue createによるプロジェクト作成からの初期設定メモ

バージョン

vue --version
@vue/cli 4.5.9

npm list vue
vue@2.6.12

vueはもうすぐメジャーバージョンアップして3系になるはずなので、
（既に公開はされてますが2020/12現在はpreviewバージョンです）
2系の設定はこれから変わることはないはず…。

プロジェクト作成

vue create [プロジェクト名]

設定例

https://cli.vuejs.org/config/
vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/'
    : '/',
  assetsDir: 'static'
}

vuex

https://github.com/vuejs/vuex
https://vuex.vuejs.org/guide/

vue add vuex

vue addは一部モジュールのみ対応したコマンドで、
npm installと推奨ディレクトリ作成、main.jsへのimportなどの環境整備を行ってくれる。
ソースに手が入るので、インストール前にgitの差分があったりすると
「作業前にcommitしたほうがいいよ」なんて警告が出たりします。

vue-router

https://router.vuejs.org/ja/installation.html

vue add router

addするとsrc/viewというディレクトリが作成される。
自然と実装はviewの中にcomponentを読み込む形になり、よりわかりやすい気がします。

eslint

https://eslint.vuejs.org/user-guide/#installation

vue add @vue/cli-plugin-eslint

書式チェッカー/フォーマッタ。
自動フォーマットは↓

npm run lint -- --fix

設定例

.eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  rules: {
    'vue/max-attributes-per-line': 'off',
    'no-console': 0
  },
  env: {
    // module.exportsなどnode環境固有の変数をlintに認識させる
    'node': true
  },
}

axios

https://www.npmjs.com/package/vue-axios

npm install --save axios vue-axios@2.1.5

--saveオプションでpackage.jsonに記録する。
vue-axiosはそのままインストールすると3系が入るが、axiosの3系はvueの3系向けであるため2系では動かない。
そのため2系向けである@2.1.5を指定する。

使い方

src/main.js

import axios from 'axios'
import VueAxios from 'vue-axios'

// vue-axios読み込み
Vue.use(VueAxios, axios)

上記でthisにaxiosが生えるので、moduleで個別にimportしなくても使える。

this.axios.get('https://dog.ceo/api/breeds/image/random')
  .then((res) => {
    this.test.Image = res.data.message
  })
  .catch((e) => {
    alert(e);
  });

bulma.css

https://bulma.io/documentation/customize/with-node-sass/

npm install node-sass@4.14.1 --save-dev
npm install sass-loader@10.1.1 --save-dev
npm install bulma --save-dev

sass-loaderの11系はvue2系に非対応なので、10系を指定する。
src/assets下にscssファイルを作り、main.jsでロードする。

src/main.js

// sass追記
require('@/assets/scss/my.scss')

sass例

src/assets/scss/my.scss

@charset "utf-8";

$menu-item-active-color: hsl(0, 0%, 29%);
$menu-item-active-background-color: hsl(0, 0%, 96%);

@import "./node_modules/bulma/bulma.sass";

fontawesome

https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

npm install --save @fortawesome/fontawesome-free

vue-fontawesomeというモジュールも存在するが、bulmaのiconクラスと相性が悪く、文字のy軸がずれてしまう。
ここでは素でnpm installし、sassで設定を行う。

https://fontawesome.com/how-to-use/on-the-web/using-with/sass
src/assets/scss/my.scss

// 公式の手順では、フォントファイル群をプロジェクト配下にコピーしてfa-font-pathを設定する
// ここでは直接node_modulesの中を参照している
$fa-font-path: '../../../node_modules/@fortawesome/fontawesome-free/webfonts';

@import "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "./node_modules/@fortawesome/fontawesome-free/scss/solid.scss";