# vue-cms

**Repository Path**: neal_zero/vue-cms

## Basic Information

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

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这 个是一个VUE的项目
## 哈哈哈，这个一个开源的项目
### 测试
## 用传统方式上传修改
1. git add .
2. git commit -m "修改信息xxx"
3. git pushjhjhj


### 首页App组件
1.完成HEader区域，使用mint-UI 中的header组件
2.制作底部的tabbar区域，使用的时候mUI中的tabbar.html
    +制作购物车小图标的时候，操作会多一些
    +把扩展的css样式拷贝到项目中
    +拷贝扩展字体库ttf文件，到项目中
    +对购物车添加样式
3.要在中间的区域放一个 router-view要展示路由匹配的组件

## 改造tabbar 为router-link
## 设置路由高亮

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

## 制作首页轮播图布局

##加载首页轮播图数据
# 1.获取数据 使用axios
# axios 安装步骤
## 1 //2.1 导入axios和VueAxios
## import axios from 'axios'
## import VueAxios   from 'vue-axios'
## //2.2 安装axios和VueAxios
## Vue.use(axios,VueAxios)
## Vue.prototype.$axios = axios;
## 1.1 home.vue编写获axios.get获取图片信息接口代码
##      在home.vue 中导入 Mint-UI 提示工具

## 改造9宫格样式，使用了mui的九宫格，增加了导航的图片，和


# 2020 09 18 
## 1.增加了新闻列列表的子路由，创建再componets->news->NewsList.vue
##   1.1 使用mui-list完成新闻列表布局(media-list.html),修改了类别的样式使用了弹性盒子布局

## 2.修改HomeContainer.vue里面新闻连接改成<router-link to="/home/newslist">
## 3.在router.js中增加{path:'/home/newslist',component:NewsList} 这个路由导航，不使用
##   子路由因为变化的页面都在app.vue中间的部分完成

## 2020 09 21
### 增加新闻组件读取新闻列表的接口 
### 使用了在main.js中使用全局配置配置了请求的接口的头信息
### axios.defaults.baseURL = 'http://127.0.0.1:5000';

## 2020 09 22
### 调整新闻列表里面的布局为了让新闻列表可以不隐藏下面的部分，外围的div使用了padding-bootom
### 在main.js增加全局的时间过滤器，安装了moment第三方插件:npm i mment -s  
### 实现新闻资讯列表点击到详情
##  把新闻列表页的a标签改造成 router-link 并且传递一个变量代表文章的ID值
##  制作一个新的newsinfo.vue页面，接受这个ID值

## 2020 09 23
### 完善新闻详细页面布局
### 制作评论组件单独封装
#### 1. 先创建一个单独的comment.vue 组件模板
#### 2. 在需要使用comment 组件的页面中，手动导入comment 组件 +import comment fomr './commnet.vue'
#### 3. 在父组件中使用 'components' 属性，将导入的comment 组件，注册为自己的子组件。
#### 4. 将注册子组件的时候，注册名称， 以标签形式，在页面中引用即可
#### 5. 使用了muit的按钮的组件



## 2020 09 24
### 完成评论的自动加载


## 2020 09 27
### 完成评论的加载更多
### 为加载更多绑定事件，请求axios并且提供参数
### 发表评论
#### 1.绑定评论框
#### 2.为按钮绑定事件
#### 3.把新评论增加到评论列表的第一位上


## 2020 09 28
### 改变图片分享，把首页首页上的A连接改成router-link,增加potolist.vue组件，在touter.js中引入potolist.vue
### 制作顶部滑动条
#### 1.借助于MUI中的tab-top-webview-main.html
#### 2.需要把slider 区域的 mui-fullscreen 类去掉
#### 3.滑动条无法正常触发活动，通过检查官方文档，发现这是JS组件，需要被初始一下；
#    +导入mui.js
#    +调用官提供的初始化方法
+       import mui from '../../lib/mui/js/mui';
+    // 2.初始化滑动组件
+    mui('.mui-scroll-wrapper').scroll({
+        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
+    });
#### 4.初始化滑动组件的时候，导入的Mui.js,但是报错了
# Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
# + 经过推测，mui.js中用到了'caller', 'callee', and 'arguments' ，但是webpack打包好的bundle.js中，启用了严格模式
# +解决方案:移除webpack 严格模式
#       +1. 安装包 npm install babel-plugin-transform-remove-strict-mode
#       +2.babelrc 文件添加配置
            {
                "plugins": ["transform-remove-strict-mode"]
            }