[Vue.js]続・Viteを導入してみる

以前の記事でvueでviteを導入する方法を書いたのですが、

https://nolyc.net/programming/vuejs-install-vite/(新しいタブで開く)

npm create vite でプロジェクト作成した時はstoreやらrouteやらを自分で入れなければいけないみたいですね。というわけで続編です。`npm create vite@latest`した後の、routerやvuex(store), axiosなどの追加方法を書いています。

# npm 6.x
npm create vite@latest

Vue routerの設定

vue3の場合は、v4をインストール

 npm install vue-router@4

srcディレクトリ下に、routerディレクトリを作成

routerディレクトリ内にindex.jsを作成し、以下を記述。
まず、createRouter、createWebHistoryをインポート。createRouter()で、ルーティング情報を扱うルータの生成ができるようになる。history設定にはcreateWebHistory()を定義する。

参考　
Vue Routerとは
[Vue.js] vue-routerのhashモードとhistoryモードの違いをざっくり理解する

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

main.jsに追記

エントリポイントとなるJavaScriptファイルに記述を追加する src/main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

# Vue.jsにVue Routerを導入して、タグで画面遷移する方法！
# 今さら聞けない？Vue Router

storeの設定

npm install vuex@next --save

storeディレクトリの作成

src/store/index.jsを作成。

import { createStore } from 'vuex'
export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
})

参考 # Vuexのインストール
注　store > index.jsの中でexport default しているのにmain.jsで { store }としたらだめです
参考 The requested module does not provide an export named in JS

main.jsに追記

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router, store).mount('#app')

axiosの設定

npm install --save axios vue-axios

main.jsに追記

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'

createApp(App).use(router, store, VueAxios, axios).mount('#app')

ほか追加する場合

好みで

Prettier

.prettierrcというファイルをプロジェクトフォルダ直下に作成。
おすすめ設定↓

{
  "semi": false,
  "arrowParens": "always",
  "trailingComma": "es5",
  "singleQuote": true,
  "quoteProps": "preserve",
  "endOfLine": "auto"
}

eslint

npm i eslint-plugin-vue
npm install eslint

プロジェクトファイル直下に設定ファイルを作成

module.exports = {
  root: true,
  env: {
    node: true,
  },
  'extends': ['plugin:vue/vue3-essential', 'eslint:recommended'],
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
}

scssを導入

sass-loaderのv11.0.0以降はwebpackのバージョン5以上しか対応していないようなので、Viteでプロジェクト作成した際はsass-loader v10をインストール
https://zenn.dev/itouuuuuuuuu/articles/284c8420d835ed

npm install --save-dev sass sass-loader@10

参考　https://amg-solution.jp/blog/25614

Viteを利用していない場合は、webpackのバージョン確認の上、該当するsass-loaderを導入しよう。
https://zenn.dev/itouuuuuuuuu/articles/284c8420d835ed

npm list webpack

my-vue-project@0.1.0 /Users/neko/Documents/my-vue-project
├─┬ @vue/cli-plugin-babel@5.0.8
│ ├─┬ babel-loader@8.2.5
│ │ └── webpack@5.74.0 deduped
│ ├─┬ thread-loader@3.0.4
│ │ └── webpack@5.74.0 deduped
│ └── webpack@5.74.0
├─┬ @vue/cli-plugin-eslint@5.0.8
│ ├─┬ eslint-webpack-plugin@3.2.0
│ │ └── webpack@5.74.0 deduped
│ └── webpack@5.74.0 deduped
└─┬ @vue/cli-service@5.0.8
  ├─┬ @soda/friendly-errors-webpack-plugin@1.8.1
  │ └── webpack@5.74.0 deduped
  ├─┬ @vue/vue-loader-v15@npm:vue-loader@15.10.0
  │ └── webpack@5.74.0 deduped
  ├─┬ copy-webpack-plugin@9.1.0
  │ └── webpack@5.74.0 deduped
  ├─┬ css-loader@6.7.1
  │ └── webpack@5.74.0 deduped
  ├─┬ css-minimizer-webpack-plugin@3.4.1
  │ └── webpack@5.74.0 deduped
  ├─┬ html-webpack-plugin@5.5.0
  │ └── webpack@5.74.0 deduped
  ├─┬ mini-css-extract-plugin@2.6.1
  │ └── webpack@5.74.0 deduped
  ├─┬ postcss-loader@6.2.1
  │ └── webpack@5.74.0 deduped
  ├─┬ progress-webpack-plugin@1.0.16
  │ └── webpack@5.74.0 deduped
  ├─┬ terser-webpack-plugin@5.3.6
  │ └── webpack@5.74.0 deduped
  ├─┬ vue-loader@17.0.0
  │ └── webpack@5.74.0 deduped
  ├─┬ webpack-dev-server@4.11.1
  │ ├─┬ webpack-dev-middleware@5.3.3
  │ │ └── webpack@5.74.0 deduped
  │ └── webpack@5.74.0 deduped
  └── webpack@5.74.0 deduped

5以上なら普通にインストールすればOK。
5以下なら、前述の通りsass-loader v10をインストール（npm install –save-dev sass sass-loader@10）。

npm install sass-loader node-sass --save-dev

参考　 https://amg-solution.jp/blog/25614

errror ## TypeError: this.getOptions is not a functionが出る場合はバージョンを下げる

npm install sass-loader@10.1.1

scss書く時は<style lang="scss">とすればOK。
諸々追加した後はpackage.jsonで追加されているかを確認できます

{
  "name": "my-recipe-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.41",
    "vue-router": "^4.1.6",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "node-sass": "^7.0.3",
    "sass": "^1.55.0",
    "sass-loader": "^10.3.1",
    "vite": "^3.2.0"
  }
}

ほか参考

Vite