前言

即便现在网上有很多模板，但还是有必要自己动手搭建一套完整的项目,废话不多说直接上代码

规范项目结构

├── publish/                    // 发布目录，用于存放编译后的代码
└── src/                        // 源代码目录
    ├── api/                    // 存放 API 相关的文件，如接口定义、请求封装等
    ├── assets/                 // 静态资源目录，存放图片、样式等文件
    ├── comm/                   // 通用代码目录，存放通用的函数、变量等
    ├── components/             // 公共组件目录，存放可复用的 Vue 组件
    ├── hooks/                  // 自定义 Hook 目录，存放自定义的 Hook
    ├── mock/                   // 虚拟数据和接口模拟目录，用于开发阶段模拟接口返回数据
    ├── router/                 // 路由配置目录，存放路由相关的配置文件
    ├── store/                  // 状态管理目录，存放 pinia 相关的配置和状态管理模块
    ├── static/                 // 静态文件目录，存放不需要经过构建处理的静态文件
    ├── utils/                  // 工具函数目录，存放通用的工具函数
    ├── types/                  // 类型声明目录，存放 TypeScript 的类型声明文件
    ├── views/                  // 页面组件目录，存放各个页面对应的 Vue 组件
    ├── App.vue                 // 根组件
    ├── main.ts                 // 入口文件，创建 Vue 应用实例并挂载到 DOM 上
    ├── env.d.ts                // 声明类型的文件，用于描述环境变量类型等
├── index.html                  // 主 HTML 文件
├── tsconfig.json               // TypeScript 配置文件，用于指定编译选项和 TypeScript 相关配置
└── package.json                // 项目配置文件，包含项目的依赖和脚本命令等信息
├── vite.config.ts              // Vite 配置文件，用于指定构建工具 Vite 的配置

创建项目命令

npm create vue@latest node版本大于16

✔ Project name: … <your-project-name>    //项目名称
✔ Add TypeScript? … No / Yes             //是否添加 TypeScript 支持
✔ Add JSX Support? … No / Yes            //是否添加 JSX 支持
✔ Add Vue Router for Single Page Application development? … No / Yes   //是否添加 Vue Router 支持
✔ Add Pinia for state management? … No / Yes     //是否添加 Pinia 支持
✔ Add Vitest for Unit testing? … No / Yes        //是否添加 Vitest 支持
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright    //是否添加端到端测试解决方案
✔ Add ESLint for code quality? … No / Yes     //是否添加 ESLint 支持
✔ Add Prettier for code formatting? … No / Yes    //是否添加 Prettier 支持

配置路由懒加载

router--->index.ts

 {
    path: '/login',
    component: () => import('@/views/login/index.vue')
 },

配置pinia

安装依赖：pnpm add pinia

在main.ts中引入

import { createPinia } from 'pinia'
app.use(createPinia())

stores--->index.ts

import { defineStore } from 'pinia'
import { getScreenLogin } from '@/service/modules/login'  //接口
import type { IAccount } from '@/types'     //ts类型声明

const useLoginStore = defineStore('login', {
  state: () => ({
    id: '',
    token: local.get(LOGIN_TOKEN) ?? '',
    name: ''
  }),
  actions: {
    async loginAccountAction(account: IAccount) {
      // 1.账号登录, 获取token等信息
      const loginResult = await getScreenLogin(account)
      this.name = loginResult.data.name
      this.token = loginResult.data.token

      // 2.进行本地缓存
      local.set(LOGIN_TOKEN, this.token)
    }
  }
})

export default useLoginStore

配置mock

安装依赖：pnpm add vite-plugin-mock -D mockjs

配置vite.config.ts文件

import { viteMockServe } from "vite-plugin-mock";
 plugins: [
      viteMockServe({
        mockPath: "./src/mock/",
        enable: command === "serve",
      }),
    ]

mock--->user.ts

import type { MockMethod } from "vite-plugin-mock";


const createUserList = []  //假数据

export default [
  {
    url: "/api/user/login",
    method: "post",
    response: (res: any) => {
      const { username, possword } = res;

      const checkUser = createUserList.find((item) => {
        return item.username !== username && item.possword !== possword;
      });

      if (!checkUser) {
        return { code: 201, data: { msg: "账号或者密码不正确" } };
      }
      const { taken } = checkUser;
      return { code: 200, data: { taken } };
    },
  },
] as MockMethod[];

适配方案（pc）

参考：juejin.cn/post/730226…

vue3+ts+vite+pinia项目搭建

前言