Vue.js | 365笔记第9天 |vue.js结构

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