# vue-cms-cli

**Repository Path**: vickymomo/vue-cms-cli

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是一个学习 Vue 的项目

## 用（传统方式）命令行把修改过的代码上传到码云

1.  git add .
2.  git commit - m "提交信息"
3.  git push

## VS Code 提供了源代码管理器

# cms 内容

## 制作首页 App 组件

1.  完成 Header 区域，使用 Mint-UI 中的 Header 组件
2.  制作底部的 Tabbar 区域，使用 MUI 中的 tabbar.html
    - 在制作购物车小图标的时候操作会相对多一些：
      - 先把扩展图标的 css 样式，拷贝到项目中
      - 拷贝扩展字体库到项目中
      - 为购物车小图标添加如下样式 `mui-icon-extra mui-icon-extra-cart`
3.  要在中间区域放置一个 router-view 来展示路由匹配到的组件

## 改造 tabbar 为 router-link

## 设置路由高亮 linkActiveClass

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

## 制作首页轮播图布局

## 加载首页轮播图数据

1.  获取数据，使用 vue-resource
2.  使用 vue-resource 的 this.$http.get 获取数据
3.  获取到的数据保存到 data
4.  使用 v-for 循环渲染每一个 item 项

## 改造 九宫格 区域样式

## 改造 新闻资讯 路由链接

## 新闻资讯 页面制作

1.  绘制界面，使用 MUI 中的 media-list.html
2.  使用 vue-resource 获取数据
3.  渲染真实数据

## 实现 新闻资讯 列表跳转到 新闻详情

1.  把列表中的每一项改造为 router-link，在跳转的时候提供唯一的 id 标识符
2.  创建 新闻详情 的组件页面 NewsDetails.vue
3.  在路由模块中，讲 新闻详情的路由地址和组件页面对应

## 实现 新闻详情 页面布局和数据渲染

## 评论组件 Comments.vue

1.  创建一个单独的 Comments.vue 组件模板
2.  在需要使用 comments 组件的页面中，先手动导入 comments 组件
    - `import comments from ./common/Comments.vue`
3.  在父组件中，使用 `components` 属性，将导入的 comment 组件注册为自己的子组件
4.  将注册的组件以标签的形式在页面中展示出来

## 获取所有的评论数据显示到页面中

1.  getComments

## 实现点击加载更多评论的功能

1.  为加载更多按钮绑定点击事件，在事件中请求下一页数据
2.  点击加载更多让 pageIndex++，然后调用 this.getComments() 方法重新获取最新一页的数据
3.  为了防止新数据覆盖老数据，在点击加载更多的时候每当获取到新数据应该让老数据调用数据的 concat 方法，拼接上新数组

## 发表评论

1.  把文本框做双向数据绑定
2.  为发表按钮绑定点击事件
3.  校验评论内容是否为空，如果为空则 Toast 提示用户，评论内容不能为空
4.  通过 vue-resource 发送请求把评论内容提交给服务器
5.  发表成功过后刷新列表，以查看最新评论
    - 如果调用 getComments 方法重新刷新评论列表只能得到最后一页的评论，当前页之前的评论数据获取不到
    - 换一种思路：当评论成功，在客户端手动拼接处一个评论对象，然后调用数组的 unshift 方法，把最新评论追加到 data 中的 comments 数组中去，这样我们就不用重新刷新评论列表

## 改造图片分享按钮为路由链接并显示对应的组件页面

## 绘制图片列表组件页面结构并美化样式

1.  制作顶部滑动条
2.  制作底部图片列表

### 制作顶部滑动条的坑
1.  需要借助于 MUI 中的 tab-to-webview-main.html
2.  需要把 slider 区域的 mui-fullscreen 类去掉
3.  滑动条无法正常触发滑动，通过检查官方文档发现这是一个 JS 组件，需要被初始化一下： + 导入 mui.js + 调用官方提供的方式初始化：
    ````
    mui('.mui-scroll-wrapper').scroll({
         deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 
    });
    ````
4. 初始化滑动条的时候导入mui.js控制台报错，
    + 经过合理的推测，是 mui.js 中用到了在严格模式下不允许使用的方法
    + 解决方案：1. 把 mui.js 中的非严格模式的代码改掉，但是不现实；2. 禁用 webpack 打包时候的严格模式
    + 使用第二种方案，移除严格模式：使用这个插件'babel-plugin-transform-remove-strict-mode'
5. 刚进入图片分享页面的时候滑动条无法正常工作，经过分析，发现如果要初始化滑动条必须要等DOM元素加载完毕，所以把初始化滑动条的代码放到 mounted 生命周期钩子函数中
6. 当滑动条调试成功后，tabbar无法正常工作，我们需要把每个 tabbar按钮的样式中的 `mui-tab-item`重新改名
7. 获取所有分类，并渲染分类列表

### 制作图片列表
1. 图片列表使用懒加载，使用 Mint-UI 提供的组件 `lazy-load`
2. 渲染图片列表数据

### 实现图片列表的懒加载和样式美化

## 实现点击图片跳转到图片详情
1. 改造 li 成 router-link 的时候，需要使用 tag 属性制定要渲染为那种元素

## 实现图片详情页面的布局、美化以及数据获取

## 实现图片详情页面中缩略图功能
1. 使用插件 vue-preview
2. 获取图片列表，使用 v-for 指令渲染
3. 注意：img 标签上的 class 属性不能去掉
4. 注意：每个图片数据对象中必须有 w 和 h 属性

## 绘制商品列表页面基本结构

## 尝试在手机上预览调试项目
1. 打开项目的 package.json 文件，在 dev 脚本中添加一个 `--host 本机IP地址` 指令，启动项目后即可用在外部电脑用本机IP地址访问当前项目

## 使用 vue-cli 重构整个CMS