https://github.com/21hook/crm
A CRM system based on vue + element-ui + axios + webpack
https://github.com/21hook/crm
crm element-ui vue webpack
Last synced: about 2 months ago
JSON representation
A CRM system based on vue + element-ui + axios + webpack
- Host: GitHub
- URL: https://github.com/21hook/crm
- Owner: 21hook
- License: mit
- Created: 2018-06-27T10:48:27.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-28T01:02:33.000Z (almost 8 years ago)
- Last Synced: 2025-04-04T04:16:12.069Z (about 1 year ago)
- Topics: crm, element-ui, vue, webpack
- Language: Vue
- Size: 349 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CRM
> A CRM system based on Vue.js
## 使用手册
``` bash
# 安装依赖
npm install
# 启动本地服务，热重载 + 端口默认：8080
npm run dev
# 将文件打包到./dist目录下
npm run build
```
## 技术总览
* JS框架：vue
地址：https://github.com/vuejs/vue
* UI组件库：element-ui
地址：https://github.com/ElemeFE/element
* HTTP库：axios
地址：https://github.com/mzabriskie/axios
* CSS处理器：postcss(import, cssnext, cssnano)
import地址: https://github.com/postcss/postcss-import
cssnext地址: https://github.com/MoOx/postcss-cssnext
cssnano地址: https://github.com/ben-eb/cssnano
* 打包
`$ npm run build [daily]`
* 启动开发服务器
`$ npm run dev [daily] [src/views/ | path-to-folder]`
热编译所有文件
`$ npm run dev daily`
热编译指定文件夹的文件
`$ npm run dev daily .src/views/folder-name`
## 目录说明
```
|-- README.md // 帮助文档
|-- index.html // 模板页面
|-- build // 打包配置
| |-- build.js // 生产环境的配置
| |-- dev-server.js // 开发环境的配置
|-- config // 变量设置
|-- src // 源代码
| |-- api // ajax请求模块
| |-- assets // src中引用的打包资源
| |-- components // 公共组件
| |-- libs // 函数库
| |-- router // vue-router目录
| |-- store // vuex目录
| |-- views // 视图文件（入口文件）
|-- static // 静态文件（直接迁移）
| |-- manifest.json // 应用信息文件
```
## 语法规范
### 基础
* 缩进：4空格
* 文件编码： UTF-8
### HTML
* 元素属性值必须包含在双引号中
* class 必须单词全字母小写，单词间以 - 分隔
* id、class 命名，在避免冲突并描述清楚
* 标签名必须使用小写字母
* 标签必须闭合
* 布尔类型的属性，不添加属性值
* 为重要图片添加 alt 属性
* 使用 button 元素时必须指明 type 属性值
### JS
* 采用`ESlint`检查代码规范
* 采用`airbnb`规范（https://github.com/airbnb/javascript）
* 改动
- 只能使用单引号
- 单行最大字符数150
- 参数的属性可以修改，但参数本身不可更改
### CSS
* 每个声明块的左花括号前添加一个空格，右花括号应当单独成行
* 每条声明语句的 : 后应该插入一个空格
* 对于属性值或颜色参数，省略小于`1`的小数前面的`0`
* 十六进制值应该全部小写且尽量使用简写形式
* 避免为 0 值指定单位，如：`margin: 0;` 代替 `margin: 0px;`
* 将媒体查询放在尽可能相关规则的附近
* 变量 （扩展css4语法）
- 单个属性
```
:root {
--mainColor: red;
}
a {
color: var(--mainColor);
}
```
- 多个属性
```
:root {
--danger-theme: {
color: white;
background-color: red;
};
}
.danger {
@apply --danger-theme;
}
```
- 多个选择器
```
@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;
:--button {
// button, .button
}
:--button:--enter {
// button:hover, button:focus, .button:hover, .button:focus
}
```
* CSS嵌套（扩展css4语法）
```
a {
& span {
color: white;
}
@media (min-width: 30em) {
color: yellow;
}
}
```
* @import (加载相应文件)
```
@import './common.css';
```
## License
MIT