【前端综合】前端项目组织结构

简介: 【前端综合】前端项目组织结构


public

components 组件目录

conponents目录存放组件,子文件夹名称按组件名称命名,组件包含的js\css\html文件同样要使用组件名命名

示例

  • components/header:头部组件,包含头部组件使用到的header.js\header.css\header.html文件,使用组件时,只需加载该header.html文件

pages 页面目录

pages存放每个页面,子文件夹使用页面名称命名,其中包含该页使用到的js\css\html文件.

示例

  • pages/index:表示首页,index目录下存放首页使用到的文件,文件命名和目录名称一致;

plugins 外部插件

plugins 存放从外部引入的插件,如bootstrap.js\bootstrap.css

示例

  • plugins/bootstrap:表示存放bootstrap插件的目录,目录下存放bootstrap的文件

public 公共静态资源

public 存放页面使用的公共静态文件或是插件需要依赖的javascript库\css库,以及图片资源、字体文件;

示例

  • public/javascript:表示存放公共的js文件,如jquery.js;
  • public/stylesheets:表示存放公共的css文件,如common.css

bulid 构建目录

bulid 是使用构建工具(gulp\fis3等)打包生成后的目录

README.md 项目说明

在readme.md中描述项目的组织结构,项目用途等说明


相关文章
|
10月前
|
机器学习/深度学习 人工智能 监控
河道塑料瓶识别标准数据集 | 科研与项目必备(图片已划分、已标注)| 适用于YOLO系列深度学习分类检测任务【数据集分享】
随着城市化进程加快和塑料制品使用量增加,河道中的塑料垃圾问题日益严重。塑料瓶作为河道漂浮垃圾的主要类型,不仅破坏水体景观,还威胁水生生态系统的健康。传统的人工巡查方式效率低、成本高,难以满足实时监控与治理的需求。
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
1369 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
10月前
|
Web App开发 API 虚拟化
Cisco Modeling Labs (CML) 2.9.0 - 网络仿真工具
Cisco Modeling Labs (CML) 2.9.0 - 网络仿真工具
626 15
Cisco Modeling Labs (CML) 2.9.0 - 网络仿真工具
|
8月前
|
机器学习/深度学习 存储 算法
淘宝图片搜索接口开发实战:从 CNN 特征提取到商品匹配(附避坑手册 + 可复用代码)
本文详解淘宝图片搜索接口开发全流程,涵盖CNN特征提取、商品匹配、参数配置及400/429等高频报错解决方案,附合规避坑指南与可复用代码,助你高效实现图像搜商品功能。
|
数据采集 Web App开发 JavaScript
爬虫技术升级:如何结合DrissionPage和Auth代理插件实现数据采集
本文介绍了在Python中使用DrissionPage库和Auth代理Chrome插件抓取163新闻网站数据的方法。针对许多爬虫框架不支持代理认证的问题,文章提出了通过代码生成包含认证信息的Chrome插件来配置代理。示例代码展示了如何创建插件并利用DrissionPage进行网页自动化,成功访问需要代理的网站并打印页面标题。该方法有效解决了代理认证难题,提高了爬虫的效率和安全性,适用于各种需要代理认证的网页数据采集。
1885 0
爬虫技术升级:如何结合DrissionPage和Auth代理插件实现数据采集
|
Linux 数据库
在Linux中,什么是冷备份和热备份?
在Linux中,什么是冷备份和热备份?
|
机器学习/深度学习 监控 安全
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
JavaScript 前端开发 API
如何利用Python的Flask框架与Vue.js创建RESTful API服务
【4月更文挑战第10天】本文介绍了如何使用Flask和Vue.js创建一个前后端分离的RESTful API服务。Flask作为后端框架,负责提供CRUD操作,与SQLite数据库交互;Vue.js作为前端框架,构建用户界面并利用axios库与后端API通信。通过示例代码,展示了Flask设置路由处理用户数据以及Vue组件如何调用API获取和操作数据。此基础结构为构建更复杂的Web应用提供了起点。
934 4
|
Python
python web框架fastapi模板渲染--Jinja2使用技巧总结
python web框架fastapi模板渲染--Jinja2使用技巧总结
1540 2