# requirejs-tools-pc

**Repository Path**: xiaoheFE/requirejs-tools-pc

## Basic Information

- **Project Name**: requirejs-tools-pc
- **Description**: 基于requirejs-PC端模块化解决方案
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-04-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于requirejs-PC端模块化解决方案

## 主要技术栈

+ jQuery      : 不解释。
+ require     : AMD模块化工具，项目的主要构件。源文件目录src/js，生成目录dist/。
+ Less        : CSS预编译语言。源文件目录src/less，生成目录dist/css。
+ Mock        : 解决方案有2种：
1. 基于mock.js假数据的解决方案。用于模拟数据接口格式即假数据，文件位置src/js/mock。(用于接口不存在的情况)
2. 接口反向代理(用于接口存在的情况)
+ artTemplate : HTML模板引擎。源文件目录src/template，生成目录dist/。

## 主要插件
+ layer 页面弹窗  文档地址：http://layer.layui.com/
+ select2 下拉框  文档地址：https://select2.org/configuration/
+ cropper 图片裁剪
+ echarts 数据图表
+ SuperSlide 轮播图，选项卡等
+ jquery-validate 表单验证
+ ztree 树形菜单
+ swiper 轮播图，滑动组件
+ webuploader 文件上传  文档地址：http://fex.baidu.com/webuploader/document.html

## 命令

```
npm install     // 安装gulp及插件
+ 建议安装cnpm，下载node包速度会快一些，下面是安装指令   // mac安装需要sudo权限
+ npm install -g cnpm --registry=https://registry.npm.taobao.org
npm run dev     // 启动开发版本，不压缩，启用css map
npm run pro     // 启动生产版本，压缩图片和js，不启用css map，启动本地server
npm run build     // 启动生产版本，压缩图片和js，不启用css map，不启动本地sever
npm run clean   // 删除dist文件夹(需在gulp do之前执行)
npm run sftp    // 将 dist/** 上传至sftp

```

## 基于gulp构建工具，详见package.json

**注意：如要使用ES6/ES7/ES8，babel-preset-env可以转为ES5，IE8以下版本无法支持。**

+ babel-core             : babel内核，用于支持babel-preset-env。
+ babel-preset-env       : babel-preset-es2015已经停用，唯一的babel插件。
+ browser-sync           : http环境。
+ gulp-babel             : babel基于gulp的插件，需要和babel-preset-env一同使用。
+ gulp-changed           : 只编译改变的文件。
+ gulp-clean             : 删除文件及文件夹。
+ gulp-file-include      : 使html有Include的功能。
+ gulp-htmlmin           : html代码压缩。
+ gulp-if                : 条件语句。
+ gulp-imagemin          : 图片压缩。
+ gulp-less              : less编译。
+ less-plugin-autoprefix : css3补全前缀。
+ gulp-plumber           : 防止产生错误终止gulp。
+ gulp-sequence          : task同步队列。
+ gulp-sftp              : sftp上传。
+ gulp-sourcemaps        : css map。
+ gulp-uglify            : js压缩。
+ gulp-strip-debug       : 移除js压缩信息。
+ gulp-watch             : 检测。
+ minimist               : 处理node参数。

## 基于Node.js

### 项目版本相关配置: 

配置文件位置：**/src/projectConfig.json**

- **version**包括前端版本控制（用于清除缓存便于测试）
- **svnVersion**版本控制（生产环境真实版本-与version保持一致即可）
- **title**项目名称（用于页面title和gulp提示）
- **sftpProjectConfig**sftp相关配置

```
{
  "version"           : "1.0.0",
  "svnVersion"        : "1.0.0",
  "title"             : "爱校App生成器",
  "sftpProjectConfig" : {
    "host"       : "192.168.1.10",
    "port"       : "22",
    "user"       : "xiaohe",
    "pass"       : "Wfzf6&uoxGwzcpvA4+eRgiuMbH6oZv^P^C",
    "remotePath" : "/home/xiaohe/www/app/business.xiaohe.com.cn/bin/webroot/dist/"
  }
}
```

### 接口反向代理:

配置文件位置：**/src/mockRouteConfig.json**

用于实现反向代理，利于前后端分离，进行本地开发：
1. **path**为代理别名即ajax.url = "/api/vote"
2. **to**为被代理地址
3. http开头为跨域地址，/开头为本地地址。

```
{
  "routes": [
    {
      "path": "/api/vote", 
      "to": "http://www.baonahao.com/Ajaxs/getCategoryNameAndCourseNum",
      "commons": "接口信息备注"
    },
    {
      "path": "/api/getUserInfo",
      "to": "/mock/post1.json",
      "commons": "接口信息备注"
    }
  ]
}
```

## 目录结构
<pre>
requirejs-tools-pc
│  .babelrc
│  .gitignore
│  deploy.sh
│  gulpfile.babel.js
│  package.json
│  README.md
│  tree.txt
│  
├─gulp
│      agent_module.js
│      clean_module.js
│      create_version.js
│      css_module.js
│      getProjectConfig.js
│      html_module.js
│      image_module.js
│      js_module.js
│      options_module.js
│      rev_module.js
│      server_module.js
│      sftp_module.js
│      toProxy.js
│      watch_module.js
│      
└─src
    │  index.html
    │  mockRouteConfig.json
    │  projectConfig.json
    │  README.md
    │  
    ├─agent
    │  │  agent_test.html
    │  │  Conf.php
    │  │  index.php
    │  │  RequestApi.php
    │  │  Sign.php
    │  │  VerificationCode.php
    │  │  
    │  └─tmp
    │          66411763d7484b502ad25cd16a3203b3.png
    │          
    ├─img
    │  │  loading_section.gif
    │  │  
    │  ├─default_img
    │  ├─form_ele
    │  │      line_date.png
    │  │      search.png
    │  │      tip_ok.png
    │  │      tip_wrong.jpg
    │  │      wrong_tip.png
    │  │      
    │  ├─icon
    │  │      icon_date.png
    │  │      
    │  ├─layer_tip_icon
    │  │      msg_icon_fail.png
    │  │      msg_icon_success.png
    │  │      
    │  ├─no_content
    │  │      guide_no_data.png
    │  │      no_contern_big.png
    │  │      
    │  ├─pagination
    │  │      first_page.png
    │  │      first_page_on.png
    │  │      last_page.png
    │  │      last_page_on.png
    │  │      next.png
    │  │      next_on.png
    │  │      prev.png
    │  │      prev_on.png
    │  │      
    │  └─radio_checkbox
    │          check_icon.png
    │          check_icon_on.png
    │          day_sel_no.png
    │          day_sel_ok.png
    │          modify_icon.png
    │          radio_icon.png
    │          radio_icon_disable.png
    │          radio_icon_on.png
    │          
    ├─include
    │  │  header-common.html
    │  │  
    │  └─layout
    │          nav.html
    │          subnav.html
    │          
    ├─js
    │  │  config.js
    │  │  init.js
    │  │  
    │  ├─config
    │  │      path.js
    │  │      
    │  ├─page-DemoShow
    │  ├─page-Index
    │  │      entry-index.js
    │  │      
    │  └─public
    │      ├─business
    │      │      backEndStatusCode.js
    │      │      cropperFz.js
    │      │      dataExport.js
    │      │      dataImport.js
    │      │      doubleClickEdit.js
    │      │      headAndFoot.js
    │      │      layerFz.js
    │      │      layerPc.js
    │      │      location.js
    │      │      pagination.js
    │      │      radioCheckbox.js
    │      │      selectConfig.js
    │      │      upload.js
    │      │      validateBefore.js
    │      │      validateFz.js
    │      │      webUploaderFz.js
    │      │      
    │      ├─service
    │      └─tools
    │              ajax.js
    │              arttemplateHelper.js
    │              method.js
    │              select2Fun.js
    │              
    ├─less
    │  │  normalize.less
    │  │  public.less
    │  │  
    │  ├─common
    │  ├─component
    │  │      button.less
    │  │      define_scrollbar.less
    │  │      disable_style.less
    │  │      form_check.less
    │  │      laydate.less
    │  │      layer_defined.less
    │  │      no_content.less
    │  │      pagination.less
    │  │      position.less
    │  │      radio_check.less
    │  │      show-hide.less
    │  │      table.less
    │  │      tree.less
    │  │      
    │  ├─Ku
    │  │      common.less
    │  │      css2.less
    │  │      css3.less
    │  │      
    │  ├─layout
    │  │      layout.less
    │  │      nav.less
    │  │      subnav.less
    │  │      
    │  ├─page-DemoShow
    │  │      entry-search.less
    │  │      
    │  ├─page-Index
    │  │      entry-index.less
    │  │      
    │  └─variable
    │          variable.less
    │          
    ├─lib
    │  ├─css
    │  │      animate.min.css
    │  │      bootstrap.min.css
    │  │      city-picker.css
    │  │      cropper.min.css
    │  │      jquery.mCustomScrollbar.css
    │  │      swiper-3.4.2.min.css
    │  │      webuploader.css
    │  │      
    │  ├─js
    │  │  │  bootstrap.min.js
    │  │  │  city-picker.data.js
    │  │  │  city-picker.data.min.js
    │  │  │  city-picker.js
    │  │  │  city-picker.min.js
    │  │  │  cropper.js
    │  │  │  css.min.js
    │  │  │  csv.min.js
    │  │  │  decimal.js
    │  │  │  echarts.min.js
    │  │  │  jquery-1.12.4.min.js
    │  │  │  jquery-3.1.1.slim.min.js
    │  │  │  jquery.animateNumber.min.js
    │  │  │  jquery.color.js
    │  │  │  jquery.SuperSlide-2.1.1.min.js
    │  │  │  jquery.validate.min.js
    │  │  │  jquery.ztree.core.min.js
    │  │  │  jquery.ztree.excheck.min.js
    │  │  │  layer.js
    │  │  │  mock-min.js
    │  │  │  require.js
    │  │  │  swiper-3.4.2.jquery.min.js
    │  │  │  swiper.animate1.0.2.min.js
    │  │  │  template-web.js
    │  │  │  text.js
    │  │  │  webuploader.js
    │  │  │  
    │  │  ├─jquery.mCustomScrollbar
    │  │  │      jquery.mCustomScrollbar.js
    │  │  │      jquery.mousewheel.min.js
    │  │  │      
    │  │  ├─laydate
    │  │  │  │  laydate.js
    │  │  │  │  
    │  │  │  └─theme
    │  │  │      └─default
    │  │  │          │  laydate.css
    │  │  │          │  
    │  │  │          └─font
    │  │  │                  iconfont.eot
    │  │  │                  iconfont.svg
    │  │  │                  iconfont.ttf
    │  │  │                  iconfont.woff
    │  │  │                  
    │  │  └─select2
    │  │          language-zh_CN.js
    │  │          select2.css
    │  │          select2.min.js
    │  │          
    │  └─skin
    │      ├─default
    │      │      icon-ext.png
    │      │      icon.png
    │      │      layer.css
    │      │      loading-0.gif
    │      │      loading-1.gif
    │      │      loading-2.gif
    │      │      
    │      ├─jigou
    │      │      layer.css
    │      │      layerIcon1.png
    │      │      layerIcon2.png
    │      │      layerIcon3.png
    │      │      layerIcon4.png
    │      │      
    │      └─jwb
    │              icon_failed.png
    │              icon_ok.png
    │              icon_warn.png
    │              shut_icon.png
    │              style.css
    │              
    ├─mock
    │  ├─DemoShow
    │  └─LogicEntry
    │          getMember.js
    │          
    ├─template
    │  │  cascade-select-template.html
    │  │  select-config.html
    │  │  select-template.html
    │  │  upload-tpl.html
    │  │  uploadApp-tpl.html
    │  │  
    │  ├─dataImport
    │  │      import-error.html
    │  │      
    │  └─no-content
    └─view
        │  index.html
        │  
        └─DemoShow
                search.html
</pre>

## 代理接口调用(php接口代理层，用于解决跨域问题)
1. 示例地址：https://doc.oschina.net/jigou-web2.0
2. 密码：xiaohe.com

## 接口文档
文档地址：xxx

## css3兼容性速查
http://caniuse.com/#search=%3A%3Aafter