vue项目架构

简介: 一、工程说明:      1.代码git仓库地址:git@gitlab.*****.git。      2.目录结构:                     1>.index.html 为build打包发布网页入口;                     2>.lieda文件夹代码项目工程目录;                     3>.static为build打包发布网页入口访问资源;      注意:不是发布勿动index.html和static文件,勿在该层级目录下引入任何资源       3.开发打开leida项目工程进行开发。

一、工程说明:

      1.代码git仓库地址:git@gitlab.*****.git。

      2.目录结构:

                     1>.index.html 为build打包发布网页入口;

                     2>.lieda文件夹代码项目工程目录;

                     3>.static为build打包发布网页入口访问资源;

      注意:不是发布勿动index.html和static文件,勿在该层级目录下引入任何资源

       3.开发打开leida项目工程进行开发。

       4.git中test分支为测试环境;master为线上环境分支;

二、工程注意事项:

       1.拉下分支更新资源文件:cnpm install

       2.接入第三方库(在package.json—>dependencies中添加可省去此步骤):

                          1>.Mint-ui H5开发快速集成组建;

                          2>.base64-js-codec加密;

                          3>.fastclick双击事件(地址:http://www.cnblogs.com/yexiaochai/p/3442220.html);

                          4>.font-awesome一套绝佳的图标字体库和css框架;

                          5>.js-cookie缓存;

                          6>. Lodash封装了诸多对字符串、数组、对象等常见数据类型的处理函数;    

                          7>.normalize.css让所有的浏览器上对于未定义的样式浏览效果达到一致;

                          8>.promise异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败);

                          9>.store.js轻松实现本地缓存(地址:http://www.cnblogs.com/lhb25/p/store-js-for-localstorage.html);

                          10>.vue-router路由跳转;

                          11>.animate.css动画;

                          12>.vue;

三、工程目录结构:

      1.src问开发中文件目录,

           下:

apis文件夹(所有的网络请求文件)

      —>根据不同需求功能建立不同的文件夹例如:advert文件夹;

      —>utils文件夹网络底层请求封装;

assets文件夹:放图片资源,

  —>下根据不同的页面新建不同的文件夹再放入资源图片; 

components文件夹:公用封装组建,

—>根据功能划分新建功能文件夹然后新建组建; 

filters文件夹:处理业务显示js文件,例如(处理职位类型,公司规模,时间显示的js文件):

export let genderRequired = function(id){

  if(id==0){

    return "不限"

  }else if(id==1){

    return "男士优先"

  }else if(id==2){

    return "女士优先"

  }else{

    return "";

  }

routers:路由配置文件;

views:页面代码文件

—>根据不同的业务建立文件夹!

styles:不同的css样式封装;

 四、打包发布流程;

        1.测试域名为:lie*****.com 对应的分支为test;

        2.线上域名为:暂时没配置  对应的分支为master;

        3.npm run build 等待生成dist文件(dist文件为打包之后的文件资源包);

 

        4.替换一级目录下的index.html文件和static文件夹;

        5.上传打包后代码到git上test分支;

        6.进入ci.*****.com网页发布 —>前端发布(测试环境)—>***.h5项目—>立即构建

      

相关文章
|
4月前
|
消息中间件 监控 前端开发
如何开发项目管理系统中的项目结项板块?(附架构图+流程图+代码参考)
在企业项目管理中,“项目结项”是关键环节,常因流程不清、文档不全、审批滞后等问题导致交付困难。本文介绍如何通过“项目结项”模块实现线上化管理,涵盖结项申请、审批流程、成果上传、权限控制等功能,帮助团队高效完成项目收尾,避免成果丢失与流程混乱。内容包括功能设计、业务流程、系统架构、数据库设计、核心代码实现、前端交互及优化建议,助力项目管理系统快速落地并稳定运行。
|
3月前
|
人工智能 自然语言处理 JavaScript
Github又一AI黑科技项目,打造全栈架构,只需一个统一框架?
Motia 是一款现代化后端框架,融合 API 接口、后台任务、事件系统与 AI Agent,支持 JavaScript、TypeScript、Python 多语言协同开发。它提供可视化 Workbench、自动观测追踪、零配置部署等功能,帮助开发者高效构建事件驱动的工作流,显著降低部署与运维成本,提升 AI 项目落地效率。
350 0
|
4月前
|
数据挖掘 项目管理 Python
如何开发项目管理系统中的项目启动板块?(附架构图+流程图+代码参考)
本文介绍了项目管理系统中“项目启动”板块的设计与实现,涵盖功能模块、业务流程、开发技巧及效果展示,并提供代码参考和常见问题解答,助力企业高效搭建项目管理平台。
|
4月前
|
存储 Java 数据库连接
简单学Spring Boot | 博客项目的三层架构重构
本案例通过采用三层架构(数据访问层、业务逻辑层、表现层)重构项目,解决了集中式开发导致的代码臃肿问题。各层职责清晰,结合依赖注入实现解耦,提升了系统的可维护性、可测试性和可扩展性,为后续接入真实数据库奠定基础。
410 0
|
4月前
|
缓存 Java 数据库
Java 项目分层架构实操指南及长尾关键词优化方案
本指南详解基于Spring Boot与Spring Cloud的Java微服务分层架构,以用户管理系统为例,涵盖技术选型、核心代码实现、服务治理及部署实践,助力掌握现代化Java企业级开发方案。
219 2
|
8月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
461 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
监控 前端开发 BI
如何开发项目管理系统中的项目收支板块?(附架构图+流程图+代码参考)
本文深入讲解项目管理系统中项目收支模块的设计与实现,涵盖预算、收入与支出管理,以及报表分析功能。内容包括模块功能概述、业务流程、开发技巧与实现方法,并提供数据库设计及前后端代码示例,助力企业打造高效的项目财务管控系统。
|
4月前
|
SQL 前端开发 项目管理
如何开发项目管理系统中的项目执行板块?(附架构图+流程图+代码参考)
随着企业项目规模扩大,传统管理方式已难以满足需求。本文介绍项目管理系统中“项目执行”板块的开发,涵盖任务管理、创建、验收及进度汇报等核心环节。通过功能设计、业务流程和开发技巧,结合代码示例,帮助企业高效推进项目执行,提升管理效率。
|
4月前
|
运维 安全 数据可视化
采用PHP+Vue技术架构的不良事件管理系统(源码)
本系统为医院安全(不良)事件管理工具,支持快速上报、流程化处理与多维度分析,助力识别风险、优化管理。采用PHP+Vue技术架构,功能涵盖事件上报、追踪整改、数据统计及PDCA改进等。
208 0
|
5月前
|
设计模式 开发者
一、HarmonyOS Next 开发者手册项目之项目架构设计
该项目是一个基于HarmonyOS Next的开发者学习手册应用,旨在帮助开发者系统学习HarmonyOS开发知识。项目采用分级学习方式,从基础到高级逐步深入讲解技术与实践案例。前四章重点介绍应用架构相关内容,助力快速掌握应用核心。 项目结构清晰,包含主入口、源代码目录、公共资源和工具等。页面导航分为多个阶段:萌新小白(基础入门)、登堂入室(进阶学习)、进阶高手(高级开发)。支持Markdown解析,使用`@luvi/lv-markdown-in`插件展示内容,并定义了多种数据结构以规范开发流程。 源码已开源,持续更新中
169 1

热门文章

最新文章

下一篇
oss云网关配置