框架介绍

名称

   前端 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配置文件