# Vue-CMS

**Repository Path**: zu1662/Vue-CMS

## Basic Information

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

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue-CMS 项目

## 制作首页APP组件

### 框架制作
1. Header 区域使用Mint-UI 中的 Header 组件
2. 制作底部 Tabbar 区域， 使用 MUI 中的 Tabbar
3. 在中间区域放置 router-view 来展示路由显示

### 改造 tabbar 为 router-link。并设置路由选中高亮

### 点击 tabbar 中的路由， 展示对应组件

### 首页轮播图制作
1. 使用 vue-resource 进行ajax数据获取
2. 使用 v-for 循环渲染每个item（必须存在key设置）

### 使用 MUI 九宫格组件，制作九宫格

## 制作 新闻列表 页面
1. 绘制界面
2. 使用 vue-resource 获取数据
3. v-for 渲染数据

## 制作 新闻详情 页面
1. 设置界面
2. 设置页面 路由,并把列表中的每个数据设置 router-link
3. 使用 vue-resource 获取数据
4. 展示数据

## 封装评论子组件
1. 设置界面
2. 在需要使用组件的页面中 ，手动导入 组件： `import comment from './comment.vue`
3. 在父组件中 使用 `components` 属性，将导入的组件注册为子组件
4. 在页面中引用组件

### 实现 加载更多 评论功能
1. 为 加载更多 按钮添加点击事件 ，请求下一页数据
2. pageIndex ++ ，重新调用this.getComments() 
3. 需要把旧数据与新请求的数据进行拼接

### 发表评论
1. 把文本框数据双向绑定
2. 发表 按钮设置点击事件
3. 校验数据，如果为空，Toast提示
4. post 上传后台
5. 发表成功后，评论刷新

## 制作 图片分享列表 页面
1. 绘制列表页面
2. MUI顶部滑动条的设置，需要js初始化：
 + 导入 MUI.js
 + 根据官方提供的方式初始化
3. 在初始化时， 导入 MUI.js 中用到了'caller', 'callee', and 'arguments'这些东西，在打包时会报错。
 + 可在webpack打包时，把严格模式禁用：使用 babel-plugin-transform-remove-strict-mode 这个插件来去除严格模式
 4. 图片列表 使用懒加载技术，可以使用 mint-ui自带的来加载组件
 
 ## 制作 图片详情 页面
1. 绘制详情页面
2. 使用 vue-preview 组件，进行缩略图的预览

## 绘制 商品列表 页面

## 绘制 商品详情 页面

## 尝试在手机上运行项目，测试
1. 保证 手机 和 开发的项目的电脑 处于同一个WIFI中，
3. 配置 package.json 文件，在dev脚本中，添加-个 --host 指令，把当前电脑的 ip 地址，设置为 --host 的指令值。