vite+vue3+ts+pinia初始化项目

vite+vue3+ts+pinia初始化项目

一.vite安装脚手架

// 初始化
npm init @vitejs/app vue3_ts_manage（项目名称） 
// 进入项目
cd .\vue3-manage\  
// 启动项目
npm run dev 

二.安装路由

vue3需要安装4版本以上的路由

1.安装路由

cnpm install vue-router@next -S

2.新建router/index.ts

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

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: () => import('../view/login.vue')
    },
]

const router = createRouter({
    history: createWebHashHistory(), // 路由模式
    routes
})

export default router;

3.挂载到mian.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

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

4.在App.vuet添加router-view

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

三、pinia

1.安装pinia依赖

cnpm i --save-dev pinia

2.新建store/index.ts

import { defineStore} from 'pinia'
import {Names} from './store-names'
export const useTestStore = defineStore(Names.TEST,{
    state:()=>{
        return{
            current:10000,
            name:'lionel'
        }
    },
    // computed 修饰一些值
    getters:{

    },
    actions:{

    }
})

3.新建store/store-names.ts

相当于命名空间

export const enum Names {
    TEST = 'TEST'
}

4.挂载到mian.ts

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

5.pinia数据持久化

​ 5.1安装pinia-plugin-persist

cnpm i pinia-plugin-persist  -s

​ 5.2在store配置是否持久化参数

import { defineStore } from 'pinia'
import { Names } from './store-names'
export const useTestStore = defineStore(Names.TEST,{
  state() {
    return {
      name: '123',
      age: null,
      current:0,
    }
  },
  persist: {
    enabled: true,
    strategies: [
      {
          key: 'user',
          storage: localStorage,
      }
    ]
  }
})

​ 5.3main.ts挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const pinia = createPinia();
pinia.use(piniaPluginPersist);

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