一、使用vue-create创建一个vue3项目
仓库地址:GitHub - buguniao5213/LuArch: Front-end architecture
官方地址:GitHub - vuejs/create-vue: 🛠️ The recommended way to start a Vite-powered Vue project
原始目录结构如下:
vue3-project/
├── public/ # 静态资源目录,构建过程中会被直接复制,无需经过编译处理
│ ├── favicon.ico # 网站图标
├── src/
│ ├── assets/ # 静态资源目录,包含图片、字体等未经过编译的文件
│ ├── components/ # 组件目录(.vue文件)
│ │ └── ... # 各类组件目录
│ ├── router/ # 路由配置目录
│ ├── stores/ # 状态管理目录,此处使用pinia
│ ├── views/ # 主要页面目录
│ ├── App.vue # 根组件,应用入口,通常包含路由视图和其他全局共享组件
│ └── main.ts # 入口脚本,用于初始化Vue实例、引入并配置路由、状态管理等核心模块
├── .eslintrc.cjs # Eslint 配置文件,用于定义项目的代码风格规范和错误检查规则
├── .gitignore # Git忽略文件
├── .prettierrc.json # Prettier 配置
├── index.html # 入口HTML文件
├── package-lock.json # npm 包管理器中用于锁定项目依赖版本的文件
├── package.json # npm 包配置文件,包括项目依赖、脚本命令、项目信息等元数据
├── README.md # 项目文档和说明文件,介绍项目结构、启动方式及注意事项等
├── tsconfig.app.json # TypeScript 设置,为前端应用配置的
├── tsconfig.json # TypeScript 项目的核心配置文件
├── tsconfig.node.json # 针对 Node.js 应用程序进行更细粒度的 TypeScript 编译设置
├── tsconfig.vitest.json # TypeScript 设置,为 Vitest 测试框架配置的
├── vite.config.ts # Vite配置文件
└── vitest.config.ts # Vitest配置文件
二、框架开发目录:
1、axios封装
2、相关配置和说明,包括vite、eslint等
3、router封装(静态)
4、..................
5、..................
6、(先开发,后补充+链接)