viteのvueプロジェクトを作成する

プロジェクトを作成する

NPM の使用: npm init vite@latest
Yarn の使用:yarn create vite

プロジェクト名を作成する
テンプレートを選択
- バニラ: ネイティブ JS、フレームワーク統合なし
- vue: vue3 フレームワーク、vue3 のみをサポート
- 反応: 反応フレームワーク
- preact: 軽量な反応フレームワーク
- lit-element: 軽量の Web コンポーネント
- svelte: 洗練されたフレームワーク
jsまたはtsを選択してください

依存関係を導入する

まずプロジェクトに入力してください
```
cd vite-test
```
依存関係をインストールする
```
npm install
```

スタートアッププロジェクト

npm run dev

vueルーターを使用する

インストール
```
npm install vue-router@4 -S
```

src ディレクトリに新しい router/index.ts を作成し、コードを記述します。

import {
      
       createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
      
      
        path: '/',
        component: () => import('../components/HelloWorld.vue')
    }
]

const router = createRouter({
      
      
// createWebHashHistory hash 路由
// createWebHistory history 路由
// createMemoryHistory 带缓存 history 路由
    history: createWebHistory(),
    routes
})

export default router

app.vueを変更する

<template>
  <router-view />
</template>

<style scoped>
</style>

次に、main.ts ファイルを次のように変更します。

import {
      
       createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

vuexを使用する

インストール
```
npm install vuex@next -S
```

src ディレクトリに新しい store/index.ts を作成し、コードを記述します。

import {
      
       createStore } from 'vuex'
const store = createStore({
      
      
    state: {
      
      
        userInfo: {
      
      
            name:'myName'
        }
    },
    mutations: {
      
      
        getUserInfo (state:any, name:string|number) {
      
      
            state.userInfo.name = name
        }
    },
    actions: {
      
      
        asyncGetUserInfo (context:any) {
      
      
            setTimeout(() => {
      
      
                context.commit("getUserInfo", +new Date() + 'action')
            },2000)
        }
    },
    getters: {
      
      
        userInfoGetter (state:any) {
      
      
            return state.userInfo.name
        }
    }
})

export default store;

次に、main.ts ファイルを次のように変更します。

import {
      
       createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from "./store";
createApp(App).use(router).use(store).mount('#app')

サスを使う

インストール
```
npm run sass --save-dev
```

使用する（インストール後すぐに使用できます）

<style lang="scss" scoped>
div {
        
        
  color: red;
  span {
        
        
    font-size: 60px;
  }
}
</style>

Vite は vue+vue-router+vuex プロジェクトを作成します