Vue项目架构
一、工程说明：
1.代码git仓库地址：[<u>git@gitlab.</u>](mailto:git@gitlab.hunteron.com)*****.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.测试域名为：[<u>lie*****.com</u>](http://liedatest.hunteron.com/) 对应的分支为test；
2.线上域名为：暂时没配置 对应的分支为master；
3.npm run build 等待生成dist文件（dist文件为打包之后的文件资源包）；
4.替换一级目录下的index.html文件和static文件夹；
5.上传打包后代码到git上test分支；
6.进入ci.*****.com网页发布 —>前端发布（测试环境）—>***.h5项目—>立即构建
网友评论