Gatsby + WordPress にscssを導入

タイトル通りだが、WordPressを管理画面としたGatsbyプロジェクトに導入した際の備忘録。プロジェクト作成時にscssを入れていなかったので、既存の(割と)プレーンなプロジェクトに追加する流れ。

環境

  • MacOS
  • node -v
    `v20.10.0`
  • Gatsby version: 5.3.3

大まかな流れ

  1. npm install
  2. gatsby-config.ts追記
  3. 既存cssの解消
  4. scssの検証

1. npm install

何はなくとも公式を参照せよ

https://www.gatsbyjs.com/plugins/gatsby-plugin-sass/

npm install sass gatsby-plugin-sass

2. gatsby-config.ts追記

gatsby-config.tsのpulugins:[]内に追記

    {
      resolve: `gatsby-plugin-sass`,
      options: {
        sassOptions: {
          includePaths: ['src/styles/scss'],
        },
      },
    },

3. 既存cssの解消

src直下のstylesはこんな風にしたい

./src
│   略
├── styles
│   ├── css
│   │   ├── @wordpress
│   │   │   └── 略
│   │   ├── global.css
│   │   ├── normalize.css
│   │   └── style.css
│   └── scss
│       ├── _base.scss
│       ├── _error.scss
│       ├── _mixin.scss
│       ├── _variables.scss
│       └── style.scss
└── 略

ベースのstyle.scssはとりあえずこんな感じ

@charset "UTF-8";

// variables
@import 'variables';

// mixin
@import 'mixin';

// default styles
@import 'base';
// @import 'slick';

// 404
@import 'error';

そのため、まずstylesディレクトリを作成し、その中にcss、scss(新規作成)ディレクトリを突っ込む。scssは完全新規なので問題ないがcssはディレクトリ構造が変わるので諸々変えなければいけない。変えたのは、以下の2ファイルのみ(だったと思う)。いずれも../css/記載部分を../styles/css/に変えるだけ。

  • gatsby-browser.tsx
  • blog-post.tsx

gatsby cleanした後にgatsby developし、エラーが出たら都度直せばヨシ。

4. scssの検証

試しにblog-post-archive.txtで、style.scssが適用されるか見てみる。

// blog-post-archive.txt
  return (
    <Layout isHomePage>
      <Seo title="All posts" />

      <Bio />
      <p className="ham">ham</p>

      <ol style={{ listStyle: `none` }}>

適用前

// style.scss
.ham {
  color: red;
}
// blog-post-archive.txt
import '../styles/scss/style.scss'

適用された✌️

Vue3 + Viteでmaterial iconを使う

みんな大好きmaterial design icon(マテリアルアイコン) をVue3とViteの環境で使ってみたので、その備忘録。

Vite .config.jsに追記するのかと思っていたら、不要でした。
やり方は全部こちらに書いてありますが、一応。

https://www.npmjs.com/package/vue-material-design-icons

アイコンはこちらから探せます。

https://materialdesignicons.com/

インストール

npm i vue-material-design-icons

yarnの場合

yarn add vue-material-design-icons

インポート

import MenuIcon from 'vue-material-design-icons/Menu.vue';

components: {
  MenuIcon;
}

グローバルの場合

import MenuIcon from 'vue-material-design-icons/Menu.vue';

Vue.component('menu-icon', MenuIcon);

描画

<menu-icon />

Nuxt.jsでスクロールアニメーションを入れる- ライブラリ Animated on Scroll (AOS)

明けましておめでとうございます。

フロントエンドエンジニアリングを勉強する前はjQuery多用ユーザーだったので、VueではjQuery使わないの?えっじゃあアニメーションとかコーディングしなきゃいけないの!?と慌てふためく脆弱エンジニアでした。VueやNuxtではライブラリが充実しているんですね〜ありがたやありがたや。

というわけで、今回はNuxt.jsにスクロールアニメーションを実装します。ライブラリで。(倒置法)

参考サイト
https://michalsnik.github.io/aos/
https://zacheryng.com/nuxt-with-animated-on-scroll/

npm install aos --save

グローバルに使いたいので@/plugins/aos.jsに導入。

import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'

Vue.use(
  AOS.init({
    once: true,
    disable: window.innerWidth < 640,
    duration: 750,
    easing: 'ease-out-quart',
  })
)

nuxt.configに追記

plugins: [
    { src: "@/plugins/aos", mode: "client" },
  ],
purgeCSS: {
    whitelist: ["aos-init", "aos-animate", "data-aos-delay", "data-aos-duration", "fade-up", "zoom-in"],
}

描画。(vuetify使っているのでplacementValいらなかったです…)

            <v-item-group>
              <v-row>
                <v-col v-for="item in serviceItems" :key="item.name">
                  <v-item
                    :data-aos="`${item.motionVal}`"
                    :data-aos-anchor-placement="`${item.placementVal}`"
                  >
                    <v-card
                      height="200"
                      class="d-flex align-center top_services_item"
                      >{{ item.name }}</v-card
                    >
                  </v-item>
                </v-col>
              </v-row>
            </v-item-group>
<script>
export default {
  data() {
    return {
      serviceItems: [
        {
          name: 'item1',
          contents: 'ここに説明が入ります。',
          placementVal: 'top-center',
          motionVal: 'fade-up',
        },
        {
          name: 'item2',
          contents: 'ここに説明が入ります。',
          placementVal: 'center-center',
          motionVal: 'fade-down',
        },
        {
          name: 'item3',
          contents: 'ここに説明が入ります。',
          placementVal: 'bottom-center',
          motionVal: 'fade-up',
        },
    }
  },
}
</script>        

Nuxt.js でsanitize(サニタイズ)

Nuxt.jsでv-htmlを使用したら,xss 脆弱性を招くのでご遠慮くださいと怒られました。

 WARN  Compiled with 1 warnings                                                                                                                 
 WARN  ESLintError                                                                                                                                         
/Users/noreen/xxx/microcms-nuxt-jamstack-blog/pages/index.vue
  6:14  warning  'v-html' directive can lead to XSS attack  vue/no-v-html
  8:14  warning  'v-html' directive can lead to XSS attack  vue/no-v-html

というわけでサニタイズします。
apiも自社開発な時などにはそこまで気にしなくてもいいですし、今回はmicroCMSからの値が返ってきていることもわかっている(ユーザからの入力が含まれる可能性はない)のですが、ライブラリがあったので試しにそちらを使おうと思います。

v-html通すまでにxssを防ぐサニタイズ
やり方全部こちらに書いてあります。
v-sanitize

vue公式が出してるのはこちら(Nuxtでは使えないかも…?エラーが消えませんでした。)
## @braintree/sanitize-url

v-sanitizeを使用した手順

インストール

npm install --save v-sanitize

pluginsに追記

グローバルで使えるよう、プラグインに追記します。

plugins/v-sanitize.js

import Vue from 'vue'
import VSanitize from 'v-sanitize'

Vue.use(VSanitize)

nuxt.config.jsに追記

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '@/plugins/v-sanitize' },
  ],
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/style-resources',
    [
      'v-sanitize/nuxt',
      {
        /* options */
      },
    ],
  ],
  sanitize: {
    /* options */
  },

コンポーネントで使用

<h2>サニタイズなし</h2>
<div v-html="test"></div>
<h2>サニタイズあり</h2>
<div v-html="$sanitize(test)"></div>
<script>
export default {
  data() {
    return {
      test: `
        <p class="script" style="color: red;"><a onclick=alert("aaa")>alert</a></p>
        <p><img src="http://placekitten.com/200/300"></p>
        <iframe width="350" height="200" src="https://www.youtube.com/embed/SB-qEYVdvXA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      `,
    }
  },
}
</script>

余談

sanitize-htmlはエラーが消えず断念しました。
Nuxt.jsでsanitize-htmlを使ってみる

エラー
in ./node_modules/sanitize-html/node_modules/htmlparser2/lib/esm/index.js 59:9 Module parse failed: Unexpected token (59:9) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | return getFeed(parseDOM(feed, options)); | } > export * as DomUtils from “domutils”; | // Old name for DomHandler | export { DomHandler as DefaultHandler };

[Nuxt.js]2.9以上 Google material icon(マテリアルアイコン)を使う

久しぶりにみんな大好きGoogle fonts.のmaterial icon(マテリアルアイコン) をNuxt(@nuxt/cli v2.15.8)で使おうと思ったら、変なところでハマりました。
やり方は全部こちらに書いてありますが、インストールするパッケージを間違えたので備忘録としてまとめておきます。

https://google-fonts.nuxtjs.org/setup

2.9以下はこちらを参照ください。

パッケージをインストール

https://www.npmjs.com/package/nuxt-material-design-icons-iconfont

yarn add nuxt-material-design-icons-iconfont
// Or npm:
npm install nuxt-material-design-icons-iconfont

nuxt.config.jsに追記

modules: [
  'nuxt-material-design-icons-iconfont',
],

head内linkへの設定は適用されませんでした。何でだろう。

    {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/icon?family=Material+Icons',
    },

vueファイルに書く

 <span class="material-icons">chevron_right</span>

参考
How to use material design icons in nuxt | stack overflow

スタイルの変更などはこちらで詳しく解説されています。
Material Icons(Google Font Icons)の使い方を解説!表示されない時に確認すべきポイントも

NuxtにSass-loaderを導入する

NuxtだってScssを使いたい。というわけで入れます。

Webpack確認

今回Nuxt2系(v2.15.8)を入れたのですが、Webpackはデフォルトでv4が入るのでしょうか。sass-loaderのv11.0.0以降はwebpackのバージョン5以上しか対応していないようなので、v10をインストールします。

webpackの確認は

npm list webpack

これでwebpackが5以上なら普通にインストールすればいいのですが、

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

あてくしのバージョンは4だったので10をインストールしました。

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

使い方

<style lang="scss">とすればOKです。

<style lang="scss">
.main {
  .title {
    font-size: 32px;
  }
}
</style>

共通化はassets/scss/common.scss作成して、nuxt.config.jsで読み込めばOKです。
common.scss

.wrapper {
  width: 1200px;
  margin: 0 auto;
}
a {
  text-decoration: none;
  transition: 0.3s;
  color: inherit;
  &:hover {
    opacity: 0.7;
  }
}

nuxt.config.js

// Global CSS: https://go.nuxtjs.dev/config-css
css: ['ant-design-vue/dist/antd.css', '~/static/assets/scss/common.scss'],

変数を定義

先ほど作成したscssフォルダに_variable.scssを作成し変数を定義した後,npm実行。

npm i @nuxtjs/style-resources

nuxt.config.jsに追記します。

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/style-resources', // ココ!
  ],
  styleResources: {
    scss: ['~/assets/scss/_variable.scss'], // ココ!
  },

vue3 componentの読み込み方

親要素からcomponent(コンポーネント)を読み込むときの手順を、復習。

まずは子componentを作成

コンポーネントはキャメルケース。
component/ChildComponent.vue

<template>
  <div class="child_component">
    <h2>This is child component</h2>
  </div>
</template>

読み込む親要素で<script>内にimportし、componentを記載する。

script内もキャメルケース。
views/Parent.vue

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  name: 'parent',
  components: {
    ChildComponent,
  },
}
</script>

読み込む親要素で描画箇所を記述

描画箇所はスネークケース

<template>
  <div class="parent">
    <h1>Parent page</h1>
    <child-component></child-component>
  </div>
</template>

トラブルシューティング

親のパスは通っていますか?

router/index.jsに親を登録していないと、/parentのuriでページが見られません。

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


const routes = [
  {
    path: '/parent',
    name: 'parent',
    component: Parent,
  },
]

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

export default router

viteを使っていますか?

Viteを使用し、@でパスの指定をしたい場合は、別途設定が必要です。
vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

[vue3]main.jsでの.use()つなぎ方によるエラー

Vue3 + viteでvuexの設定をいじっている時に、エラーが出たのでその備忘録。
エラー文
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘state’)
↑を解決した後に、

Uncaught RangeError: Maximum call stack size exceeded

という別のエラーが出ました。一難去ってまた一難。

結論から言うと、main.jsのcreateApp(App).use()のチェーンの仕方が悪かったようです。

バージョン

  • MacOS
npm list
├── @vitejs/plugin-vue@3.2.0
├── axios@1.1.3
├── node-sass@7.0.3
├── sass-loader@10.3.1
├── sass@1.55.0
├── vite@3.2.1
├── vue-axios@3.5.2
├── vue-router@4.1.6
├── vue@3.2.41
└── vuex@4.0.2

エラーの出たコード01

.useで使うプラグインを全て1つの()に入れ、コンマで区切っています。

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')

この際に出たエラー文

Home.vue:5 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'state')
    at Proxy._sfc_render (Home.vue:5:20)
    at renderComponentRoot (runtime-core.esm-bundler.js:898:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5631:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at instance.update (runtime-core.esm-bundler.js:5745:56)
    at setupRenderEffect (runtime-core.esm-bundler.js:5759:9)
    at mountComponent (runtime-core.esm-bundler.js:5541:9)
    at processComponent (runtime-core.esm-bundler.js:5499:17)
    at patch (runtime-core.esm-bundler.js:5101:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5711:17)

stateがどうこう言われているので、一旦routerとstoreを引き離してみる。

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).use(store, VueAxios, axios).mount('#app')

これでエラーは消えます。

stackoverflowの回答者によれば、.useの引数は1番目は1つのみで、2番目以降はおまとめできるとのことでした。

the use method accept one plugin as first parameter and options (which si optional) as second one app.use(plugin, itsOptions)

Vuex Cannot read property ‘state’ of undefined


ちなみに全部.use()のチェーンを分けて記載すると、別のエラーが出ました。

Uncaught RangeError: Maximum call stack size exceeded
    at isPlainObject (utils.js:129:23)
    at assignValue (utils.js:287:9)
    at forEach (utils.js:261:10)
    at merge (utils.js:299:21)
    at assignValue (utils.js:290:21)
    at forEach (utils.js:261:10)
    at merge (utils.js:299:21)
    at assignValue (utils.js:290:21)
    at forEach (utils.js:261:10)
    at merge (utils.js:299:21)

実験してみると、2つ目のエラーは分けたことが原因なのではなく、VueAxios, axiosの順番で読み込まないといけないということだったみたいです。
NG

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

NG

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

OK

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

axiosとstoreは一緒に入れても問題ないようでしたが、気持ち悪いので分けました。

[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&nbsp;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

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

早い早いと話題のVite(ヴィート)。フランス語で「素早い」の意味らしいです。
Webpackではアプリケーション起動前に、アプリ全体を走査し依存を解決→バンドルしたソースを出力という流れだったのに対し、ViteはNative ESModulesのimportを利用し、ブラウザから直接モジュールを読み込むことで高速化を実現しています。

モジュールバンドラーRollup を使用してコードをバンドル…とあるので、ノーバンドルツールと言われつつもバンドルしない訳ではないようです。

この辺りの解説はANTEZさんの記事やっぱりwebpackがわからない(エピソード1)が超絶わかりやすかったです。

プロジェクト作成

前提

Viteを使うには、Node.jsが14.18+、16+でなければなりません。

% cd projects
% npm create vite@latest
Need to install the following packages:
  create-vite@3.2.0
Ok to proceed? (y) y
✔ Project name: … vite-app
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /Users/meow/Documents/projects/vite-app...

プロジェクト名や使用するテンプレートはオプションでも指定可能。

# npm 6.x
npm create vite@latest my-vue-app --template vue

とりあえず起動

npm install
npm run dev

テーン!!

後からわかったのですが、`npm create vite’でプロジェクト作成した時はstoreやらrouteやらを自分で入れなければいけないみたいですね。というわけでこちらにまとめました。

Vite / vue.js / vue3

ほか参考

Vite