2026.6.11笔记

一、核心技术选型

1. Vue3

作为前端主流框架，Vue3的组合式API（Composition API）相比Options API更灵活，支持按需引入API，大幅降低组件耦合度。

2. Vue Router

Vue官方路由管理器，负责页面路由跳转、路由拦截等核心功能，是单页应用（SPA）的基础。

3. Pinia

Vue3官方推荐的状态管理库，替代了传统的Vuex。相比Vuex，Pinia具有以下优势：

扁平化结构：无需嵌套模块，多个独立Store直接管理不同维度的状态，耦合度更低；
极简API：去掉了Vuex的mutations，直接通过actions修改状态，代码更简洁；
完整TS支持：天生适配TypeScript，类型提示更友好；
兼容Vue2/Vue3：跨版本兼容，迁移成本低。

二.项目搭建步骤

1.

# 创建Vite项目
npm create vite
# 进入项目目录
cd 你的项目名称
# 安装基础依赖
npm install
# 安装Vue Router
npm install vue-router
# 安装Pinia
npm install pinia

##2.
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    redirect: '/login' // 默认跳转到登录页
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  }
]

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

export default router

##3.
import { defineStore } from 'pinia'

// 定义并导出用户Store
export const useUserStore = defineStore('user', {
  // 状态：初始化时从localStorage读取数据，实现持久化
  state: () => ({
    token: localStorage.getItem('token') || '',
    username: localStorage.getItem('username') || ''
  }),
  // 动作：修改状态的方法（支持异步）
  actions: {
    // 设置用户信息
    setUser(username, token) {
      this.username = username
      this.token = token
      // 同步到localStorage
      localStorage.setItem('username', username)
      localStorage.setItem('token', token)
    },
    // 退出登录：清空状态和本地存储
    logout() {
      this.username = ''
      this.token = ''
      localStorage.removeItem('username')
      localStorage.removeItem('token')
    }
  }
})
等等