hytgis v0.0.6

框架介绍

名称

   前端 web 端框架（代码规范）

简介

   本项目运用前端技术为：html、css、less、javaScript、vue、vue-router、vuex、axios、js-base64

依赖

• 1、开发工具 WebStorm 或 visual studio code
• 2、打包依赖：webpack（^5.37.0）版本
• 3、转义依赖：babel 系列（^7 版本）
• 4、语法规范依赖：eslint（^7.3.1 版本）
• 5、样式规范依赖：stylelint(^10.1.0 版本)、stylelint-config-prettier(^5.3.0)、stylelint-config-standard（^18.3.0）
• 6、开发框架依赖：vue（^2.6.14 版本）

vscode eslint插件（2.1.8）、stylelint插件(0.84.0)编辑器配置

{
    "eslint.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.run": "onType",
    "eslint.options": {
	"extensions": [".js",".vue",".json"]
    },
    "eslint.validate": [
        "vue",
        "javascript", {
            "language": "vue",
            "autoFix": true
        },
        "html", {
          "language": "html",
          "autoFix": true
        }
],
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"emmet.includeLanguages": {
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"window.zoomLevel": 0,
}

相关命令

1. 安装依赖: npm install
2. 运行: npm run dev
3. 编译: npm run build

编译后文件存在 dist 目录下

框架说明

命令（inquirer）式的选择项目启动

启动入口：/webpack/main/dev.js(build.js)

每个项目的执行入口

1. html 入口 /main/project/**/index.html
2. js 入口 /main/project/**/index.js

框架总体架构图

模块划分

1. 容器组件(业务大的模块)务必在 model 文件夹下面建立自己的容器 model，共享状态
2. 业务组件(基本业务模块)根据自己业务需求，定义该模块的状态
3. 容器组件的数据流转图

架构目录说明

架构

内容组成

换算单位

文档、代码规范化

动画库、图表库

布局模板

webpack、vite构建工具

数据管理、驱动、交互

公共组件库以及效果展示

多项目统一管理

单个项目的输出和输入

设计

换算单位插件

开发目录结构

• dll

• explain

  	- 前端规范
  	- redux的数据流转图
  	- 架构

• main

  	- common
  
  	  # 公共目录
  	  ## 存放规则
  	   * http，服务请求的封装
  	   * store，全局数据管理
  	   * tool，工具集合
    
  	- project
  
  	  # 项目目录
  	  ## 目录规则
  	   * 项目名称必须以"**"结尾
  	   * 项目目录第一层级必须包含"index.html、index.js"文件
  	   * 在当前项目中，添加webpack.config.js，可以自己配置相关webpack的config配置,比如publicPath
  	   * 项目目录第一层级可以添加配置文件，规则为添加config目录，里面包含了是三个js文件，分别是：system.dev.config.js、system.prod.config.js、systemConfig.js
  	  ## 项目优化
  	   * 如果需要抽象出来一些静态资源来，则可以建立自己项目中新建excludeStatic文件夹，里面可以放一些静态资源；通过相对路径来访问，比如：/excludeStatic/demo1.png
    
  		- demo
  		- demo1
  		- .......

• mock

  规则说明

  文件规则

  • 项目名称必须以".json"结尾
  • 文件读取并提供对应接口，是在/webpack/nodeServer/的resServer.js内容实现的
  • 请保证接口api的唯一性
  • 每次新增的json文件，请重新启动开发环境

  文件内容规则

  {
    "servers": [
      {
        "url": "/getName",
        "desc": "获取用户姓名",
        "type": "get",
        "result": {
          "mock|1-10": [
            {
              "id|+1": 1
            }
          ]
        }
      },
      {
        "url": "/modifyName",
        "desc": "修改用户姓名",
        "type": "post",
        "result": {
          "mock": true
        }
      }
    ]
  }

• webpack

  	- common
  
  		- optimization.js
  		- plugins.js
  		- rules.js
  		- util.js
  
  	- main
  
  		- build.js
  		- common.js
  		- dev.js
  
  	- nodeServer
  
  		- init.js
  		- resServer.js
  		- units.js
  
  	- server.js
  	- webpack.base.js
  	- webpack.dev.js
  	- webpack.dll.js
  	- webpack.prod.js

• .eslintignore

• .eslintrc.js
• stylelint.config.js
• .stylelintignore
• .prettierrc.js
• .prettierignore
• .gitignore
• babel.config.js
• package-lock.json
• package.json
• README.md

自定义cli

webpack深入定制

配置文件校验

各个项目提供各自的webpack.config.js配置文件