Vue3+TypeScript+Vuetify3+Pinia实例

使用Vite创建一个项目

yarn create vite

输入项目名称
选择框架vue
选择TypeScript
进入项目，安装依赖

安装Vuetify3

在项目根目录下面，执行：

vue add vuetify

选择预设→Vuetify 3 – Vite (preview)

解决main.ts 引入./App.vue爆红提示

在vite-env.d.ts中添加一下代码。

declare module "*.vue" {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

在这段代码中，我们使用了TypeScript中的declare module语法，它允许我们在模块中声明全局变量、函数、类型等信息。在这里，我们声明了一个.vue文件的模块，并指定了它的默认导出类型为Vue组件（DefineComponent）。

安装Vue-Router

yarn add vue-router

在 src/views/ 中创建 Home.vue：

<template>
  <HelloWorld />
</template>
<script lang="ts" setup>

import HelloWorld from "../components/HelloWorld.vue";
</script>

创建src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
    {
        path:"/",
        name:"Home",
        component: () => import("../views/Home.vue"),
    }
];

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

export default router;

将路由文件添加到main.ts中

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from "./router";
import { loadFonts } from './plugins/webfontloader'


loadFonts()

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

修改 App.vue

<template>
  <v-app>
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script lang="ts" setup>

</script>

安装Pinia

yarn add pinia

pinia 添加到 main.ts

import { createApp } from 'vue'
import { createPinia } from "pinia";
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from "./router";
import { loadFonts } from './plugins/webfontloader'


loadFonts()

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

创建 src/store/counter.ts

import {defineStore} from "pinia";

export const useCounterStore = defineStore("counter",{
    state: () => ({ count: 0 }),
    getters: {
        double: (state) => state.count * 2,
    },
    actions: {
        increment() {
            this.count++
        },
    },
})

使创建的计数器在 HelloWorld.vue 中可用

<template>
  <v-container>
    <p>counter:{{counter.count}}</p>
    <p>doubleCounter:{{counter.double}}</p>
    <v-btn @click="counter.increment()">+1</v-btn>
  </v-container>
</template>

<script setup lang='ts'>

import {useCounterStore} from "../store/counter.ts";

const counter = useCounterStore()
console.log(counter)
</script>

Pinia 数据持久化

yarn add pinia-plugin-persistedstate

创建 src/store/index.ts

import {createPinia} from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const pinia = createPinia()

pinia.use(piniaPluginPersistedstate)

export default pinia

重写main.ts

import { createApp } from 'vue'
// import { createPinia } from "pinia";
import store from './store/index.js'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from "./router";
import { loadFonts } from './plugins/webfontloader'

// const pinia = createPinia();
loadFonts()

createApp(App)
  // .use(createPinia())
   .use(store)
  .use(vuetify)
  .use(router)
  .mount('#app')