以前の記事でvueでviteを導入する方法を書いたのですが、 npm create vite でプロジェクト作成した時はstoreやらrouteやらを自分で入れなければいけないみたいですね。というわけで続編です。`npm create vite@latest`した後の、routerやvuex(store), axiosなどの追加方法を書いています。 Vue routerの設定 vue3の場合は、v4をインストール srcディレクトリ下に、routerディレクトリを作成 routerディレクトリ内にindex.jsを作成し、以下を記述。まず、createRouter、createWebHistoryをインポート。createRouter()で、ルーティング情報を扱うルータの生成ができるようになる。history設定にはcreateWebHistory()を定義する。 参考　Vue Routerとは[Vue.js] vue-routerのhashモードとhistoryモードの違いをざっくり理解する main.jsに追記 エントリポイントとなるJavaScriptファイルに記述を追加する src/main.js # Vue.jsにVue Routerを導入して、タグで画面遷移する方法！# 今さら聞けない？Vue Router storeの設定 storeディレクトリの作成 src/store/index.jsを作成。 参考 # Vuexのインストール注　store > index.jsの中でexport default しているのにmain.jsで { store }としたらだめです参考 The requested module does not provide an export named in JS main.jsに追記 axiosの設定 main.jsに追記 ほか追加する場合 好みで Prettier .prettierrcというファイルをプロジェクトフォルダ直下に作成。おすすめ設定↓ eslint プロジェクトファイル直下に設定ファイルを作成 scssを導入 sass-loaderのv11.0.0以降はwebpackのバージョン5以上しか対応していないようなので、Viteでプロジェクト作成した際はsass-loader v10をインストールhttps://zenn.dev/itouuuuuuuuu/articles/284c8420d835ed 参考　https://amg-solution.jp/blog/25614 Viteを利用していない場合は、webpackのバージョン確認の上、該当するsass-loaderを導入しよう。https://zenn.dev/itouuuuuuuuu/articles/284c8420d835ed 5以上なら普通にインストールすればOK。5以下なら、前述の通りsass-loader v10をインストール（npm install –save-dev sass sass-loader@10）。 参考　 https://amg-solution.jp/blog/25614 errror ## TypeError: this.getOptions is not a functionが出る場合はバージョンを下げる scss書く時は<style lang=”scss”>とすればOK。諸々追加した後はpackage.jsonで追加されているかを確認できます ほか参考 Vite