# cisdi-template

**Repository Path**: Jancheng/cisdi-template

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目说明
cisdi-template 系统模板

标签： 说明
***
## 技术栈：
 - vue、require.js【模块化加载方式AMD】
 - webstorm【开发工具】
 - axiox 、vuex、vue-router、less
 - Node、webpack【打包工具】
***
#### 开发要求：
- 文件命名规则：按照驼峰原则，首字母大小、语义化、vue/less/js存在如果分开书写，需要文件名一致
- CSS样式命名:中划线区分，按层级语义化命名
- IMG命名规则：bg-名-状态   bg:背景 icon:图标 button:按钮;状态：normal、hover等
## 项目目录说明
```
|--cisdi-template
|  |--node_modules //第三方依赖模块
|  |--public 
|  |  |--favicon.ico //系统关联图标
|  |  |--index.html  //首页
|  |--src
|  |  |--assets //静态文件夹
|  |  |  |--img //图片归类、与子目录与各个组件对应起来
|  |  |  |  |--common //公用组件图片、图标
|  |  |--components
|  |  |  |--HelloWorld //组件库
|  |  |--config 
|  |  |  |--configIndex.js //系统整体配置文件、用于配置api接口等
|  |  |--routerInfo  //路由文件夹
|  |  |--storeInfo //vuex状态管理信息文件夹 
|  |  |--style  //样式文件夹
|  |  |  |--common.less //公用样式
|  |  |--tools
|  |  |  |--eventBus.js  //消息总系
|  |  |  |--httpClient.js //ajax请求客户端、包括get /post /put /delete
|  |  |--views //路由可直接访问的页面
|  |  |--App.vue //启动页
|  |  |--main.js //配置
|  |  |--router.js //路由
|  |  |--store.js //vuex
|  |--.env.cuslocal //本地环境配置
|  |--.env.dev //开发环境配置
|  |--.env.pro //生产环境配置
|  |--.gitignore //git上传配置
|  |--babel.config.js 
|  |--package.json //依赖配置
|  |--README.md //说明文档
|  |--vue.config.js //配置说明
```
***
node /npm安装
- (1)在控制台加测是否存在node -v;
- (2)如果存在直接npm install 安装相关的打包工具，否则需要下载node 安装在本地;

***
webpack 打包
- (1)npm local 本地模拟运行;
- (2)npm serve 开发环境运行;
- (3)npm dev-build 测试环境打包;
- (4)npm pro-build 生产环境打包;
- (5)dist目标文件夹中的文件，为此生产打包过后的文件，拷贝至静态服务器nginx html中即可运行；

***
### 提醒说明
- （1）项目采用单页项目模式加载，运行时需要静态文件服务器