# nanniwanfront
**Repository Path**: hhy1314/nanniwanfront
## Basic Information
- **Project Name**: nanniwanfront
- **Description**: 南泥湾前端工程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: V1
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 8
- **Created**: 2025-06-19
- **Last Updated**: 2025-07-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# constructionApp-front
设备管理系统是采用前后端分离的方式开发的。前端由vue+iview实现，其中涉及到的技术有：
- webpack--模块打包工具
- babel--与webpack配合编译es6
- node--开发运行环境
- es6--主要编程语言
- vue--前端框架
- vue-router--路由组件
- less--css预处理语言
- iview--UI组件库
- axios--HTTP库
- eslint--规范前端代码质量
开发项目之前至少需要了解以上知识。
## 环境准备
1.安装Node.js，从[官网](https://nodejs.org/en/)下载，下载稳定版本，不要最新版本，现在应该是10.16版本，最新版本不稳定，可能有未知的错误。
2.从GITEE上git clone前端项目代码，GITEE路径为 https://gitee.com/easylinkin/Link-App
3.为了编程风格的统一，编辑器统一安装EditorConfig插件
4.前端IDE统一使用VSCode，谷歌浏览器统一安装devtools来Debug
5.进入Link-App，在命令行终端执行以下命令
```bash
npm --registry=https://registry.npm.taobao.org install
```
等待命令执行完成，如果提示npm命令不存在，则表示Node.js没有安装正确，可以运行此命令检查
```bash
npm --version
```
## 运行
### 工程目录说明
```
|-dist (在运行npm run build后会出现，为编译后的压缩代码，不加入版本控制)
|-node_modules (在运行npm install后会出现，为依赖模块，不加入版本控制)
|-src (工程源码，源码编译后将放到dist目录中)
| |-components (自定义组件，添加vue文件后需要在index.js内注册)
| |-config
| | config.js (项目配置文件)
| | env.js (自动生成，标记当前环境是否为开发环境，不加入版本控制)
| |-images (图片路径)
| |-libs (自定义函数工具)
| |-styles (外部定义的样式文件)
| |-template (编译生成主页面的模板文件)
| |-views (编写的页面都放在这里，根据路由来绑定页面)
| app.vue (根组件)
| main.js (入口js文件)
| router.js (路由文件，将路由和views目录下问页面文件绑定)
| vendors.js (项目依赖的库文件)
.babelrc (配置babel)
.eslintignore (配置eslint忽略文件)
.eslintrc.json (配置eslint规则)
.gitignore (配置git忽略文件)
.stylelintrc.json (配置stylelint规则)
index.html (入口页面)
LICENSE (版权许可证)
package.json (项目所需要模块及配置信息)
README.en.md (项目英文介绍及使用文档说明)
README.md (项目中文介绍及使用文档说明)
webpack.base.conf.js (webpack基础配置)
webpack.dev.conf.js (webpack开发环境配置)
webpack.prod.conf.js (webpack生产环境配置)
```
### 开发模式
运行以下命令
```bash
npm run init(运行一次即可，生成index.html)
npm run dev
```
开发模式采用webpack的插件web-dev-server实现热部署，每次有文件更新会自动编译，不用重新运行，也不需要刷新浏览器。
另外需要注意webpack.dev.config.js里面关于DevServer的配置，这个是为了将数据访问接口代理到后台去的配置，请根据实际
情况配置。
### 生产模式
运行以下命令，编译打包。编译生成的文件在项目更目录下的dist。
```bush
npm run build
```
发布时只需要把生成的dist目录与index_prod.html拷贝至后台项目的webapp目录下即可，注意在webapp下面将index_prod.html改为index_v4.1.html
### 开发规范
项目是单页应用，使用的是vue-router。所有的路由跳转基本上都在首页的菜单上。下面就简单说下加一个菜单的开发过程。
1.在./src/view下对应的模块目录中添加路由组件xxx.vue
2.在index的菜单下添加配置项，如下
```bash
系统管理
```
类似于公司管理，加一个MenuItem，注意此处MenuItem要与下方的路由配置中的
name一致。
3.在router.js中，配置路由。我们的菜单在index.vue上，因此我们添加的路由都是`/manage`的子路由。在`/manage`的children下添加以下格式的代码：
```bash
{
name: 'xxx',
path: 'xxx',
component: (resolve) => require( ['./views/rule/xxx.vue'], resolve),
meta: {authCode: 'xxx', parentMenu: 'xxx'}
}
```
`name`--路由名称，要与对应的MenuItem保持一致。
`path`--路由路径匹配
`component`--路由组件
`meta`--路由元数据，其中authCode是菜单权限码，加之前需要确认数据库中是否已经将此权限添加，parentMenu的值需要与步骤2中MenuItem的父节点Submenu的name保持一致。
4.在xxx.vue编写代码实现。
5.给模块加权限v-auth
### UI规范定义
- 根据UI规范，本项目将UI规范参数定义于difinitions.less文件中
- 组件的样式建议使用less书写
- 有自闭合标签且没有附带内容，尽量使用自闭合，如``
- 当样式中需要用到difinitions.less中定义的变量和mixin，需要引入定义文件，如下
```less
@import "../../styles/difinitions.less";
```
- UI规范按钮类型对应
|type |对应UI规范|
|-------|----|
|default|按钮一规范|
|dashed |按钮二规范(灰)|
|ghost |按钮二规范(彩)|
|info |按钮三规范|
|primary|按钮四规范|
项目中使用方法
```html
```
- 设计图中的图标可暂时用 https://www.iviewui.com/components/icon ivew中的图标代替，后续统一改
### 编码规范说明
#### Javascript
- 自定义函数需要有文档注释，包含：函数说明，参数类型，参数名，参数说明，返回值类型，返回说明，格式示例如下：
``` javascript
/**
* 给菜单列表添加对应等级的子菜单
* @param {map} parentMenuMap 父菜单的键值对
* @param {object} childMenuItem 子菜单项
* @param {integer} level 子菜单级别
* @returns {list