# demo

**Repository Path**: yglcx/demo

## Basic Information

- **Project Name**: demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-27
- **Last Updated**: 2024-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端文档

## 如何编译前端资源

首先你需要安装 Nodejs 14版本（推荐） 或者 yarn（不推荐） 。

安装完成后：

1. 打开终端，切换到mgedata-frontend的根目录下

此时可以输入 `node -v` 查看你的 node版本，如果这一步提示识别不到命令可能是没有配置环境变量，网上教程很多可以搜索解决。

2. 输入命令`npm install` 或 `yarn instll` 开始安装依赖，第一次安装时间可能较长


3. 安装完成后 `npm run dll` 或 `yarn run dll` 

4. 然后执行本地启动命令 `npm run start` 或 `yarn run start`，访问localhost:8080端口即可本地开发

## 总体介绍

整个项目使用webpack进行编译、打包工作。webpack的配置文件已经写好。

打包出来的文件位于`/dist/static/webpack`文件夹下。

`/dist/static/`文件夹下是旧的前端文件，除了修改bug不要更改内容。

* `entry`文件夹存放所有入口的业务逻辑代码和对应每个入口的独立scss

* `views`和`components`文件夹存放前端需要用到的组件，例如TreeView、ButtonGroup等。每个组件各自的样式表、引用的图片等也放在这个文件夹。
    * `views`存放原生的DOM组件

    * `components`存放React组件。**新页面全部使用React实现**

* `typings`文件夹存放旧代码的类型标注信息。主要是`Urls`和`django`。一般不需要动

## CSS

CSS部分使用scss / less。scss的编译产出会autoprefixer处理

* 因为之后使用ant-design，所以新的代码全部改成使用less。已有的scss不变。

* 不需要在css部分写带`-webkit-` `-moz-`之类的前缀，前缀会自动加上


## 新增页面的流程

1. 修改`webpack.config.js`里的`entry`字段，增加新的入口文件

2. 修改`webpack.config.js`里的`siteMap`字段，增加新的入口url

1. 编译：`npm run build`

## 打包操作

1. `npm run dll`
2. `npm run dll-dist`
3. `npm run dist`