Vue3+Ts+Vite2+Pinia 搭建开发框架

一、使用vite快速创建脚手架

1. 使用yarn运行安装命令：yarn create vite

2. 选择vue vue-ts 完成安装

3. 进入vue3_ts_vite_pinia项目，使用yarn命令安装依赖,依赖安装完成后，使用yarn dev启动项目

二、路由配置（vue-router@4）

1. 使用yarn安装vue-router@4： yarn add vue-router@4

2. src文件夹下新建router文件夹,router文件夹下新建index.ts

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

const routes: RouteRecordRaw[] = [   //注:RouteRecordRaw为内置类型
    {
        path: '/',
        name: 'Index',
        component: () => import('@/pages/index/Index.vue'),
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router
 

3. 在main.ts中，引入router并注册

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

4. 在App.vue中设置路由展现出口 <router-view></router-view>

<template>
    // <img alt="Vue logo" src="./assets/logo.png" />
    // <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
    <router-view></router-view>
</template>
 

三、状态管理（Pinia配置）

Pinia 是 Vue.js 的轻量级状态管理库,也是Vue核心团队推荐的状态管理库，由于Pinia也是Vuex研发团队的产品，以及尤雨溪的加持，极大可能会替代Vuex，即使pinia的推广不太顺利也并不用过多担心，其许多使用方式很有可能会移植到Vuex5中。
相较于Vuex,Pinia上手更简单，mutations，并且actions支持同步或异步。

1. 使用yarn安装 pinia@next：yarn add pinia@next

2. src文件夹下新建store文件夹,store文件夹下新建main.ts

import { defineStore } from 'pinia' export const useUserStore = defineStore({ id: 'user', state: () => ({ name: '用户名' }), getters: { nameLength: (state) => state.name.length, }, actions: { updataUser(data: any) { console.log(data) } } })

3. 在main.ts中，引入createPinia

import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import { createPinia } from 'pinia' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app')

四、基本使用

1. 获取state

• 直接获取

<template>
    <div>{ {userStore.name}}</div>
</template>
<script setup lang="ts">
  import { useUserStore } from "@/store/user.ts"
  const userStore = useUserStore()

</script>
 

• computed获取

<template>
    <div>{ {name}}</div>
</template>
<script setup lang="ts">
import { useUserStore } from "@/store/user.ts"
const userStore = useUserStore()
const name=computed(()=>{
    userStore.name
})
</script>

• 结构获取，但会失去响应式，需要使用storeToRefs

<template>
    <div>{ {name}}</div>
</template>
<script setup lang="ts">
import { useUserStore } from "@/store/user.ts"
import {storeToRefs} from 'pinia'
const userStore = useUserStore()
const name=storeToRefs(userStore)
</script>

2. 设置state

• 直接修改