vue3 + ts + pinia + vite + vueRouter4的基本配置和使用

  拥抱新技术，持续学习~

1.下载一大堆依赖

yarn create vite  //创建项目

yarn

yarn dev  //安装依赖并运行

yarn add vue-router@4 //安装路由

yarn add pinia  //状态管理

yarn add --dev typescript   // ts环境  

npm i -D naive-ui  // UI

npm i -D vfonts  //字体

npm install @vitejs/plugin-vue  //配置vite 插件

npm install --save-dev @types/node  //防止引入组件时报错

npm install -D pinia-plugin-persist  //pinia的持久化存储

vite.config.ts 配置文件

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

/************************************* 路径配置 start ********************************/
import { resolve } from 'path' 

const pathResolve = (dir: string): any => {  
  return resolve(__dirname, ".", dir)          
}

const alias: Record<string, string> = {
  '@': pathResolve("src")
}
/************************************* 路径配置 end ********************************/
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {  // ****************** 路径配置新增
    alias     // ****************** 路径配置新增
  }           // ****************** 路径配置新增
})

ts.config.json 配置文件

{
    "compilerOptions": {
      "allowSyntheticDefaultImports": true, 
      "baseUrl": ".",  
      "esModuleInterop": true,  
      "importHelpers": true,
      "module": "esnext", 
      "moduleResolution": "node",
      "strict": true,  
      "sourceMap": true, 
      "skipLibCheck": true,  
      "target": "esnext",      
      "types": [
      ],
      "isolatedModules": true,
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "ESNext",
        "DOM",
        "DOM.Iterable",
        "ScriptHost"
      ]
    },
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
  }
  

更改index.html入口文件

<script type="module" src="/src/main.ts"></script>

新建shim.d.ts 配置文件

/* eslint-disable */
import type { DefineComponent } from 'vue'

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

main.ts的配置

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import store from './store'
import naive from 'naive-ui'
import 'vfonts/Lato.css'
import 'vfonts/FiraCode.css'
createApp(App).use(naive).use(store).use(router).mount('#app')

router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
    // {
    //     path: "/",
    //     name: "HelloWorld",
    //     component: HelloWorld,
    // },  
    // 像vue2那样去声明路由
 
];

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

export default router;

store/index.ts(主文件实例化pinia)

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia();
store.use(piniaPluginPersist);
export default store

store/user.ts(分成模块来使用pinia)

import { defineStore } from 'pinia'
export const useUserStore = defineStore({
  id: 'user', // id必填，且需要唯一
   persist: {
     enabled: true  //开启持久化存储
   },
  state: () => {
    return {
      name: '夜魔'
    }
  },
  actions: {
    updateName(name) {
      this.name =  this.name=="夜魔"?name:"夜魔"
    }
  },
  getters: {
    fullName: (state) => {
      return "你到底是谁？是"+state.name+"吗"
    }
  }
})

在组件中使用pinia

<script lang="ts" setup>
import { useUserStore } from "./store/user";
const userStore = useUserStore();
let change = () => {
  userStore.updateName("王伟琪");
};
</script>

<template>
  <n-button @click="change()" id="center" type="primary"> {{userStore.name}} </n-button>
   <n-gradient-text
    gradient="linear-gradient(90deg, green 0%, blue 100%)"
  >
   {{userStore.fullName}}
  </n-gradient-text>
</template>

<style>
#center {
  position: absolute;
  left: 50%;
  top: 200px;
}
</style>

在组件中使用vueRouter

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import { ref } from 'vue'
defineProps({
  msg: String
})

const router = useRouter();  //全局路由
const route = useRoute();   //当前路由
let froms = ref(route.params.from);  //当前路由参数

const goHome = () => {
  router.push({
      name: 'Index',
      params: {
          val: 1
      }
  })
}

</script>