首页 > 其他分享 >项目结构和规范

项目结构和规范

时间:2024-10-30 17:20:55浏览次数:4  
标签:项目 配置 规范 js 页面 CSS 结构

当然可以!以下是将您提供的内容重新组织和格式化后的版本,使其更易于阅读和理解:


项目结构

  • node_modules: 项目依赖的包所在的目录
  • public: 存放 favicon 图标和 HTML 根模板
  • src: 项目代码目录
    • api: 请求接口配置
    • assets: 图片、字体等静态资源目录
    • components: 全局组件
    • icons: SVG 图标
    • router: 路由配置
    • store: Vuex 全局状态管理
    • layout: 页面布局相关,主要包括顶部导航、侧边导航和页面主体等
    • style: 公共样式
    • utils: 全局工具库
    • view: 项目页面
    • App.vue: Vue 根挂载点
    • main.js: Webpack 打包入口文件
    • permission.js: 权限配置
    • settings.js: 项目相关配置
  • .editorconfig: 编辑器配置
  • .env.development: 开发模式环境变量
  • .env.production: 生产模式环境变量
  • .eslintrc.js: ESLint 配置
  • babel.config.js: Babel 配置
  • package.json: 项目依赖包清单和项目启动等指令配置
  • vue.config.js: devServer 和 Webpack 相关配置

页面布局规范

对于一些页面布局大致相同的页面,如企业详情和个人详情等页面,会将这些页面的样式抽离出来到 pages.scss 文件中。类似的页面和布局请引入其中的类即可。

CSS 规范

  1. 命名规范:
    • 请采用有意义的命名,尽量不要出现 123 等数字。
  2. 符号规范:
    • 注意区分中英文符号,常见的如 HTML 中中文后的冒号和括号应写成英文的。
  3. 组件复用:
    • 类似于分页、结果页、文件上传等多个页面通用的功能,会封装成组件供大家调用,也利于后期的维护和风格统一。不要自己再实现一遍,如对公共组件修改,请考虑对其他页面的影响。

SCSS 规范

  1. 嵌套样式:
    • 请尽可能使用 SCSS 提供的嵌套样式规则,使 CSS 和 HTML 结构保持一致,做到逻辑上的对应。
  2. 全局样式:
    • 前端 CSS 有根据 UI 设计规范在全局定义了一套规则,如标题和正文颜色、按钮大小颜色等,请参考 styles 目录下的 standard.scss 文件。至少知道哪些是默认设定好的,无需在 CSS 中写无用的代码。

标签:项目,配置,规范,js,页面,CSS,结构
From: https://www.cnblogs.com/lmzzr24/p/18516227

相关文章

  • 是不是每个项目经理都需要一个项目管理平台?看数据说话!(5项分析)
    一、项目管理平台的广泛应用项目管理平台在当今的各类项目中得到了极为广泛的应用,无论是软件开发、工程项目,还是市场营销等领域,都能看到其身影。它为项目的顺利进行带来了诸多积极影响,如提高项目执行效率、增强团队协作能力、降低项目风险等。(一)项目管理平台的常见功能任务分配......
  • 项目管理平台实操:项目经理如何快速生成项目报告?(3分钟教程)
    一、项目管理平台与报告生成的关联项目管理平台在项目管理中起着至关重要的作用。它为项目经理提供了一个集中化的管理工具,能够有效地组织和协调项目的各个方面。首先,项目管理平台可以实现对项目任务的全面管理。通过任务清单功能,项目经理可以清晰地了解每个任务的名称、描述、......
  • 项目管理平台实操:项目经理如何设置并监控10个关键项目阶段?
    一、项目管理的关键流程与重要性介绍项目管理需关注的十个关键流程,阐述这些流程对项目成功的重要性。(一)生命周期与方法论的划定项目的生命周期与方法论如同项目的纪律,为项目的发展划定了清晰的界限。生命周期通常由开始、规划、执行/控制、完成等阶段组成,或者由工作的重复周......
  • 2024年项目经理必看!项目管理平台如何助力项目成功交付?
    一、项目管理平台的重要性在2024年,项目管理平台对于项目成功交付起着至关重要的作用。首先,项目管理平台能够极大地提高协作效率。例如,像禅道这样的优秀平台,为团队提供了统一的协作空间,成员可以在平台上共享文档、讨论问题、分配任务等。通过这种方式,信息传递更加及时准确,避......
  • 强势建议收藏!2024年工程项目管理平台上的10个高效工具
    一、多功能的禅道禅道作为工程项目管理平台,拥有众多强大功能。在项目管理和协作方面,禅道集成了产品管理、项目管理、质量管理、文档管理、组织管理和事务管理等多方面功能,完整覆盖了工程项目管理的核心流程。通过禅道,团队成员可以清晰地了解项目的各个环节,从需求收集到项目交付......
  • 2024年强势推荐!最经典4款最适合工程项目的免费管理平台
    一、工程项目管理平台的重要性工程项目管理具有复杂性高、周期长、资源要求多样、协调性强等特点。复杂性体现在涉及多个专业领域协同工作,需遵循严格法律法规和标准,且各个阶段都需要详细计划和协调。例如,一个大型工程项目可能需要土木、电气、机械等多个专业人员合作,每个领域都有......
  • 如何利用5大功能,打造高效工程项目管理平台?
    一、工程项目管理平台的重要性工程项目管理往往涉及众多环节和多个专业领域,其复杂性不言而喻。一个工程项目通常包括设计、采购、施工、验收等多个阶段,每个阶段又有众多的工作任务,且任务之间存在复杂的依赖关系。例如,在建筑工程项目中,土木工程、电气工程、机械工程等多个专业领域......
  • 工程项目管理的7个主要特征,你知道吗?
    一、工程项目管理概述工程项目管理是一种综合性的管理活动,涵盖了从项目的发起、计划、实施到项目的结束全过程的各种管理活动。其核心目标是确保工程项目的成功完成,包括满足质量、进度、成本和其他相关要求。工程项目管理的重要性不言而喻。首先,它能为项目提供明确的目标和方向......
  • 建筑行业知识管理:构建高效文档管理系统,提升项目协作与管控能力
    各行各业都在经历数字化转型,建筑行业也不例外,正经历着前所未有的变革。随着工程项目规模的扩大和复杂性的增加,传统的管理方式已难以满足高效协作和精准管控的需求。因此,构建一个高效的在线AI知识库管理系统,成为提升建筑行业项目管理能力的关键。一、传统建筑工程信息管理......
  • 为.Net项目添加动态库加载路径
    为.Net项目添加动态库加载路径_51CTO博客_linux动态库加载路径本文分别基于.NetFramework和.NetCore的WPF应用程序为例,来说明如何为.Net项目添加自定义动态库加载路径。本文基于.NetCore创建WPF时,使用了.Net5作为目标框架。1、.NetFramework在基于.NetFramework的WPF项目......