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项目—>立即构建

      

相关文章
|
8天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
102 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
前端开发 JavaScript 测试技术
Kotlin教程笔记 - 适合构建中大型项目的架构模式全面对比
Kotlin教程笔记 - 适合构建中大型项目的架构模式全面对比
67 3
|
1月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
130 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
1月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
98 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
1月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
86 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
1月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
103 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
8天前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
|
1月前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
96 12
|
2月前
|
开发框架 前端开发 .NET
一个适用于 .NET 的开源整洁架构项目模板
一个适用于 .NET 的开源整洁架构项目模板
68 26
|
2月前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
281 1

热门文章

最新文章