快速搭建vite + vue-router + pinia...

在使用官方建议的 npm init vite@latest 命令创建项目的时候，项目非常纯净，仅有一些基础的依赖比如 vue、typescript等。

{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "typescript": "^5.2.2",
    "vite": "^5.0.8",
    "vue-tsc": "^1.8.25"
  }
}

我希望能快速集成 vue3 的全家桶，所以将配置的过程在这里写出来，便于后面创建项目时随时查看。

初始化vue3 + vite项目

// 创建时指定项目名、vue3、typescript
npm create vite@latest my-vue-family --template vue-ts
cd my-vue-family
npm install
npm run dev

配置alias

在开发中，src 的别名 @，必不可少，不用浑身刺挠，所以我第一个来配置。

// vite.config.ts
import path from 'path'
export default defineConfig({ 
    resolve: { 
        alias: { '@': path.resolve(__dirname,'src') 
        } 
    }
})

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
        "@/*": ["./src/*"],
    },
  },
}

"types": ["node"]表示 typescript 将支持 nodejs。

这样写了之后，ts 会报错 Cannot find module 'path' or its corresponding type declarations。

需要安装一个插件让 ts 对 nodejs 提供支持。

npm i @types/node -D

同时 tsconfig.json 也声明对 nodejs 的支持。

// tsconfig.json
{
  "compilerOptions": {
    "types": ["node"],
    "paths": {
        "@/*": ["./src/*"],
    },
  },
}

配置vue-router

安装 vue-router

npm install vue-router@4

配置基础路由，包含简单的路由守卫

// src/router/index.ts
import type { App } from 'vue'
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../layout/index.vue'
import { createRouterGuard } from './guard'
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "HelloWord" */ '../views/index.vue'),
    name: 'HelloWord',
    meta: { hidden: false , hasAuth: false}, /
  },
]

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

export async function setupRouter(app: App) {
  app.use(router)
  createRouterGuard(router)
  await router.isReady()
}

// src/router/guard/index.ts
export function createRouterGuard(router: Router) {
  router.beforeEach(async (to: any) => {
    if (to.meta.hasAuth) {
      console.log('需要校验');
    }else{
      console.log('不需要校验');
    }
  })
  router.afterEach((to: any) => {
    console.log('下一个路由');
  })
}

在 main.ts 中使用

// src/main.ts
import { setupRouter } from './router'

// 构建vue应用
async function setupApp() {
  const app = createApp(App)
  // 挂载路由
  await setupRouter(app)
  app.mount('#app')
}
setupApp()

配置pinia

安装 pinia

npm install pinia

// src/store/index.ts
import type { App } from 'vue'
import { createPinia } from 'pinia'

export function setupStore(app: App) {
  const store = createPinia()
  app.use(store)
}
export * from './modules'

在 src/store/modules 分模块管理 store

// src/store/modules/index.ts
// 导入所有的store模块
export * from './user'

某一个 store 文件

// src/store/modules/user.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore("transaction-detail", () => {
  const username = ref('admin')
  const getUsername = () => {
    return username.value
  }
  return { username, getUsername }
})

在页面中使用

import { useLoginInfoStore } from '@/store'
const userStore = useLoginInfoStore()
console.log(userStore.username); // admin