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

      

相关文章
|
1月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
88 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
29天前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
149 2
|
1月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
35 3
|
20天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
6天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
14天前
|
前端开发 JavaScript 测试技术
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
在 Android 开发中,选择合适的架构模式对于构建中大型项目至关重要。常见的架构模式有 MVVM、MVP、MVI、Clean Architecture 和 Flux/Redux。每种模式都有其优缺点和适用场景,例如 MVVM 适用于复杂 UI 状态和频繁更新,而 Clean Architecture 适合大型项目和多平台开发。选择合适的架构应考虑项目需求、团队熟悉度和可维护性。
42 6
|
14天前
|
存储 前端开发 数据可视化
在实际项目中,如何选择使用 Flux 架构或传统的 MVC 架构
在实际项目中选择使用Flux架构或传统MVC架构时,需考虑项目复杂度、团队熟悉度和性能需求。Flux适合大型、高并发应用,MVC则适用于中小型、逻辑简单的项目。
|
1月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
38 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
23天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
20 7
|
19天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。