明星项目架构解决方案——搭建基础项目结构

目录

前言

VS Code 辅助插件安装 

Prettier - Code formatter

Tailwind CSS IntelliSense

Volar

项目架构基本结构处理分析

构建项目架构

---

前言

1. VS Code 辅助插件安装
2. 项目基础结构路由分析
3. 路由表划分
4. 项目架构搭建

VS Code 辅助插件安装 

项目开发助手 Prettier - Code formatter 、 Tailwind CSS IntelliSense、Volar

Prettier - Code formatter

1. 安装插件 Prettier - Code formatter

2. 创建配置文件 .prettierrc

3. 配置文件中添加内容

{
    "semi": false,
    "singleQuote": true,
    "trailingComma": "none"
}

4. 在 .vue 文件中，右击、选择“使用…格式化文档”、“配置默认格式化程序”中选择“Prettier- Code formatter”

5. 保存时格式化代码：设置 > 搜索 save > 选择“Editor: Format On Save”

Tailwind CSS IntelliSense

1. 安装插件 Tailwind CSS IntelliSense。帮助我们进行 Tailwindcss 类名提示。

Volar

1. 安装 Vue Language Features (Volar)

2. 安装后不需要进行处理

项目架构基本结构处理分析

        移动端 和 PC端 两者的路由结构是不同的，所以这就要求我们需要根据 当前用户所在设备的不同，构建不同的路由表。

        那么接下来我们就根据这一小节的分析，结合我们的项目经验，构建出基本的项目架构。

构建项目架构

- src
- - App.vue // 项目根组件，一级路由出口
- - api // 接口请求
- - assets // 静态资源
- - - icons // svg icon 图标
- - - images // image 图标。比如：xxx.png
- - - logo.png // logo
- - components // 通用的业务组件。比如：一个组件在多个页面中使用到
- - constants // 常量
- - directives // 自定义指令
- - 1ibs // 通用组件、可用于构建中台物料库或通用组件库
- - main.js // 入口文件
- - permission.js // 页面权限控制中心
- - router // 路由
- - — index.js // 路由处理中心
- - modules // 路由模块
- - - mobile-routes.js // 移动端路由
— - - pc-routes.js // PC 端路由
- - store // 全局状态
- — - getters.js // 全局状态访问处理
- - - index.js // 全局状态中心
- - - modules // 状态子模块
- - styles // 全局样式
- - - index.scss // 全局通用的样式处理
- - utils // 工具模块
- - vendor // 外部供应资源。比如：人类行为认证
- - views // 页面组件。与 components 的区别在于：此处组件对应路由表，以页面的形式展示
— - - layout // 用于 PC 端，分割一级路由和二级路由
- - - - components // 该页面组件下的业务组件
- - - - index.vue // layout 组件
- tailwind.config.js // tailwind css 配置文件，与 src 平级
- vite.config.js // vite 配置文件，与 src 平级