# yjh-mall-platform

**Repository Path**: 494901823/renren-fast-vue

## Basic Information

- **Project Name**: yjh-mall-platform
- **Description**: 营家积分商城
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Raiseinfo Frontend Framework 

### 安装及运行
```
1. cnpm install
2. npm run dev
```
### 开启Mock模拟数据
```
1. 全局开启Mock：
  通过设置/src/mock/example.js)文件中fnCreate(common, [false])[]中括号中为true／false开启关闭当前模块mock本地模拟数据功能。
2. 模块级局部开启：
  通过设置/src/mock/modules/文件下模块isOpen: [false][]中括号中为true／false开启关闭当前api接口mock本地模拟数据功能。（默认开启）
```
### 定制主题
```
1. 修改Element-ui组件主题：
  修改/src/element-ui-theme/index.js文件中import './element-[#17b3a3]/index.css'[]中括号中的值，值可以在同文件中list属性中取即可。
2. 修改站点主题：
  修改/src/assets/scss/_variables.scss文件中$--color-primary: [#17b3a3];[]中括号中的值，值与第一步值同步即可。
  
```
### 动态路由
```
菜单路由项：值为/sys/user自动映射对应文件目录为src/views/modules/[sys/user.vue]文件
```
### 样式调整记录
```
1. 自定义样式：src\assets\scss\_custom.css
2. 应用样式：src\assets\scss\index.scss 添加 @import "custom";
3. Element-ui组件默认为mini：src\element-ui\example.js 
  Vue.prototype.$ELEMENT = { size: 'mini' }
```
### 创建功能模块
#### 添加菜单目录和菜单项
```
实际项目中可以在对接系统管理模块后，通过菜单添加，然后根据命名约定创建模块目录。
Mock模拟数据：
1. 创建文件：src\mock\modules\example-grid.js
2. 编辑文件：添加模拟数据，并提供接口
3. 开启Mock拦截：src\mock\example.js 添加：
  import * as exampleGrid from './modules/example-grid'
  fnCreate(exampleGrid, true)
4. 添加菜单项：src\mock\modules\sys-menu.js
  添加菜单，添加权限
```
#### 添加功能模块页面
```
1. 在目录src\views\modules中创建与菜单URL对应的目录结构
  比如：菜单路径为：example/grid，创建的目录结构统一即可
2. 确保src\views\modules\example\grid.vue此文件存在，并编写测试代码。
3. 通过点击系统中的[参考页面][数据列表]查看是否显示正常
4. 其他编程细节请看具体模块文件
```
### 利用接口开发
```
修改/static/config/index.js目录文件中 window.SITE_CONFIG['baseUrl'] = '本地api接口请求地址';
```
### 跨域设置
```
1. 修改/config/dev.env.js目录文件中OPEN_PROXY: true开启代理
2. 修改/config/index.js目录文件中proxyTable对象target: '代理api接口请求地址'
3. 重启本地服务
4. 本测试API：https://www.easy-mock.com/mock/5c1dc926eba47d7ec5d137d3/example/grid/list
```
### 业务实现的步骤和原理
1. 建立业务菜单后后，根据命名规则，在src\views\modules\下面创建相应的模块目录和功能文件。（可以参考添加功能模块页面）
2. 接口调用的实现在：src\service\core.js
3. 接口调用的URL定义在：src\service\example.js
4. 表单验证方法在：src\utils\validator.js
5. 表单验证规则定义：src\utils\validate.js
6. 与框架无关的工具函数：src\utils\util.js

### 整合tinymce富文本编辑器
按照依赖包必须在cmd命令行模式下，不要用webstorm或者vscode的终端运行，否则编译不过
```
1. cnpm install tinymce -S
2. 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下
3. tinymce 默认是英文界面，目前项目中已经准备好了中文包，拷贝使用即可。
4. 创建vue组件，view/common目录中，在这里进行编辑器的初始化和设置
5. 创建项目文件，如：view/modules/example/editor.vue
6. 具体配置请参考文章：https://www.cnblogs.com/wisewrong/p/8985471.html
```
### 整合markdown编辑器
```
1. cnpm install mavon-editor --save
2. 引入组件：参考main.js
3. 项目参考：view/common/home.vue,这里只是作为只读的展示界面，通过调整参数可以变为可编辑。
4. 参考文章：https://www.jianshu.com/p/04376d0c9ff1
5. 参考仓库：https://github.com/hinesboy/mavonEditor
```
### 页面数据打印
```
1. cnpm install vue-print-nb --save
2. import Print from 'vue-print-nb'
3. 打印范例：views/modules/example/material.vue为打印测试页面
4. views/common/print 使用组件进行版面定制的打印方式
5. views/modules/example/material-print.vue使用新页面定义打印版面的打印方式
```
### 管理静态路由及页面（删除echarts和ueditor）
```
1. 打开文件：src\router\example.js
2. 参考home和theme写法，添加路由。这里注释掉echarts和ueditor路由
3. 打开文件：/index.html 注释掉echarts和ueditor相关的行
4. 删除侧栏菜单：在src/views/main-sidebar.vue中注释掉关于echarts和ueditor的相关el-menu-item行。
5. 重新编译如果没有错误则说明删除成功。
6. 添加静态路由及菜单页面，可参考上述步骤自己添加。
7. 总结：静态路由及菜单相关文件：src/router/example.js src/views/main-sidebar.vue
8. 如果是希望把echarts和ueditor打包到项目，需要修改build/webpack.base.conf.js
```
### 调整页面样式
```
1. src/assets/scss/目录用来控制页面的布局和样式。
2. index.scss载入入口
3. _custom.scss用于自定义全局样式
4. _variables.scss用于定义颜色变量
5. _base.scss用于定义侧栏、顶部导航、页面内容的样式
```
### 添加全屏
```
cnpm install screenfull --save
src/components/screen-full
src/views/main-navbar.vue
```
### 添加修改组件大小
```
src/components/set-select
src/views/main-navbar.vue
src/views/main-sidebar.vue
src/store/modules/theme.js
src/store/getters.js
```
### 添加调整侧栏和导航栏样式
```
src/components/set-theme
src/views/main-navbar.vue
src/views/main-sidebar.vue
src/views/main-sidebar-sub-menu.vue
src/store/modules/theme.js
src/store/getters.js
```
### 添加面包屑显示
```
src/components/bread-crumb/index.vue
src/utils/index.js
src/views/main-navbar.vue
```