@egova-magic/form-design
TypeScript icon, indicating that this package has built-in type declarations

1.0.0-alpha.17 • Public • Published

egova-starter-template

系统名称

项目结构

┌── build                   # webpack脚本
├── config                  # config
├── src                     # main
│    ├── application 		# 程序启动载入处理逻辑
│    ├── assets     		# 可打包资源文件
│    │    ├── images      	# 图片资源
│    │    ├── styles      	# 样式资源
│    ├── common             # common
│    │    ├── mixins      	# vue多页面共用mixins
│    │    └── utils   		# 页面相关样式,页面内单独引用
│    ├── components 		# 项目中共用components
│    ├── models 		    # 项目中模型实体定义
│    ├── routes 		    # vue-router前端路由
│    ├── services 		    # 项目中共用服务定义
│    ├── store              # store
│    │    └── modules      	# 按模块使用
│    ├── types              # d文件定义
│    ├── views              # 业务模块视图定义
│    ├── settings      		# 全局设置
│    └── index.ts           # 入口
│
├── node_modules            # 依赖
├── public                  # 静态文件
│    ├── index.html 		# 程序启动载入处理逻辑
│    └── favicon.ico     	# 程序图标
├── dist                    # 打包之后的文件
├── .editorconfig	        # 通用编辑器配置
├── .gitignore		        # git忽略提交配置
├── .postcssrc.js           # postcss配置
└── package.json            # package info

注意事项

因为采用了 dll 预打包,所以首次(或核心库版本发生变动),需要执行:

$ npm run dll

默认核心库包含如下内容:

  • vue
    • vue
    • vue-router
  • flagwind - flagwind-core - @egova/flagwind-web - @egova/flagwind-echarts

    自定义核心库在 vendor.js 中配置

如果项目依赖如 axioslodash 等库,只需按照如下方式导入即可:

import axios from "axios";
import lodash from "lodash";

项目使用 stylelint 对样式进行检查,样式代码需要保持规范,建议开发过程中安装并开启 stylelint 插件: stylelint 配置文件.stylelintrc.json中配置内容有: "selector-max-id": 2, // 限定选择器中 id 选择器个数为 2, 建议只用一个 id 选择器 "max-nesting-depth": 5 // 选择器嵌套深度不能超过 5 层, 建议最多不超过 3 层 "selector-max-compound-selectors": 5, // 复合选择器数量限制为 5 order/properties-order: [...] // 限定属性申明的顺序,大致顺序如下

  • 1、定位:position z-index left right top bottom clip等。
  • 2、自身属性:width height min-height max-height min-width max-width等。
  • 3、文字样式:color font-size letter-spacing, color text-align等。
  • 4、背景:background-image border等。
  • 5、文本属性: text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow等。
  • 6、css3 相关属性:contentbox-shadowanimationborder-radiustransform

插件会按规则自动调整某些 css 代码。例如:插件会自动按设定的属性顺序代码中书写的顺序

常用命令

  • npm run dev 进入调试模式,默认地址为 http://localhost:8040
  • npm run lint 使用 tslint 验证源码
  • npm run dll 预打包核心依赖库
  • npm run build 生产打包
  • lint:css 使用 stylelint 验证样式源码规范性
  • lint:css-fix 使用 stylelint 规范样式源码

使用

npm run build 打包

组件库 @egova/component 打包

npm run components:install      更新组件库依赖
npm run publish                 发布组件到npm

单独打包 login 页面

npm run build:login

备注: 发布组件时确认 npm 使用的官方源,且已经登录 npm

更新说明

form-design 使用了 tinymce 富文本编辑器,将 form-design 引入项目时,若遇到富文本编辑器无法显示的问题,需要将./public/static/tinymce 文件夹拷贝到项目中


Readme

Keywords

none

Package Sidebar

Install

npm i @egova-magic/form-design

Weekly Downloads

1

Version

1.0.0-alpha.17

License

MIT

Unpacked Size

19 MB

Total Files

1634

Last publish

Collaborators

  • yuhaoz