课程名称：基于Vue3，打造前台+中台通用提效解决方案
课程章节：第4章 明星项目架构解决方案——搭建基础项目结构
主讲老师：Sunday
课程链接：https://coding.imooc.com/class/chapter/577.html#Anchor

课程内容：

今天学习的内容包括：

• 项目开发助手 Prettier - Code formatter 、 Tailwind CSS IntelliSense、Volar
• 项目架构基本结构处理分析
• 构建项目架构
• 话题讨论：如何理解前台前端架构方案？

课程收获：

主体结构

• vscode 插件
• 项目基础结构路由划分
• 路由表划分
• 项目架构搭建

vscode 辅助插件

• prettier-code formatter
  • 用来处理代码格式化问题，自动根据eslint来格式化代码
• tailwindcss
  • tailwind的核心语法是一个类名表示一个css属性，通过tailwindcss属性可以智能提示tailwindcss的类名
• volar
  • Vue的辅助插件

项目基础结构路由划分

• 划分路由出口
  • 移动端
    • App.vue
      • 一级路由出口，用作整页路由切换
  • 桌面端
    • Main.vue
      • 二级路由出口，用作局部路由切换

构建项目基本架构

• src
  • app.vue
  • api
  • assets
    • icons
    • images
    • logo.png
  • components
  • constants
  • directives
  • libs
  • main.js
  • permission.js
  • router
    • index.js
    • modules
      • mobile-routes.js
      • pc-router.js
    • store
      • getters.js
      • index.js
      • modules
    • styles
      • index.scss
    • utils
    • vendor
    • views
      • layout
        • components
        • index.vue
  • tailwind.config.js
  • vite.config.js

课程学习截图