cms php vue 开源_18919938190

#这是一个NB的项目

##牛不牛逼，用心去感受，每一行代码中的诗情雅意

###我们是有灵魂的程序员，所以，我们的代码富有诗意；

##主流开源协议之间有何异同？

##用(传统方式)命令行把修改过后的代码上传到码云??

git add

git commit -m "提交信息"

git push

##制作首页 App组件

1.完成 Header 区域，使用的是 Mint-UI 中的 Header组件

2.制作底部的 Tabbar区域，使用的是 MUI 的 Tabbar.html

在制作购物车的小图标的时候，操作会相对多一些：

先把 扩展图标的 css 样式，拷贝到项目中

拷贝 扩展图标的 ttf 文件，到项目中

+为购物车 小图标，添加如下样式 mui-icon mui-icon-extra mui-icon-extra-cart

3.要在 中间区域放置一个 router-view来展示路由匹配到的组件

##改造 tabbar 为 router-link

设置路由高亮

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

##制作首页轮播图布局

##加载首页轮播图数据

获取数据，使用 vue-resource

使用 vue-resource 的 this.$http.get获取数据

获取到的数据，要保存到 data 中

使用 v-for 循环渲染每个 item 项

##改造九宫格区域的样式

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

新闻资讯 页面制作

绘制界面

使用 vue-resource 获取数据

渲染真实数据

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

把列表中的每一项改造为 router-link,同时，在跳转的时候应该提供唯一的ID标识符

创建新闻详情的组件页面， NewsInfo.vue

在路由模块中，将新闻详情的 路由地址 和 组件页面对应起来

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

单独封装一个 commment.vue 评论子组件

先创建一个单独的 comment.vue 组件模板

在需要使用 comment 组件的页面中，先手动导入 comment 组件

import comment from './comment.vue'

在父组件中，使用 components 属性，将刚才导入 的 comment组件，注册为自己的子组件

将注册子组件时候的，注册名称，以标签形式，在页面中引用即可

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

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

为加载更多按钮，绑定点击事件，在事件中，请求下一页数据

点击加载更多，让 pageIndex++，然后重新调用一下this.getComments() 方法重新获取最新一样的数据

为了防止新数据 覆盖老数据的情况，我们在 点击加载更多的时候，每当获取到新数据，应该让老数据

调用数组的 concat方法，拼接上新数据

发表评论

把文本框做双向数据绑定

为发表按钮绑定一个事件

校验评论内容是否为空，如果为空，则Toast提示用户，评论内容不能为空

通过 vue-resource 发送一个请求，把评论内容提交给服务器

当发表评论ok后，重新刷新列表，以查看最新的评论

如果调用 getComments 方法重新刷新评论列表的话，可能是能得到最后一页的评论，前几页的评论获取不到

换一种思路：当评论成功后，在客户端，手动拼接一个最新的评论对象，然后调用数组的

unshift方法，把最新的评论，追加到data中 comments的开头，这样，就能完美实现刷新评论列表的需求

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

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

制作顶部的滑动条

制作图片列表

制作顶部滑动条的坑

需要借助 MUI 中的 tab-top-webview-main.html

需要包 slider 区域的 mui-fullscreen类去掉

滑动条无法正常触发滑动，通过检查官方文档，发现这是一个JS组件，需要初始化一下

导入 mui.js

调用官方提供的方式去初始化：

mui('.mui-scroll-wrapper').scroll({

deceleration: 0.0005 // flick减速系数，系数越大，滚动速度越慢，滚动距离越小，默认 0.0006

})

我们在初始化 滑动条 的时候，导入了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中，默认是启用类的 严格模式的，所以，这2者冲突了;

解决方案：1.把 mui.js 中的 非严格模式的代码改掉，但是不现实

2.把 webpack 打包时候的严格模式禁用掉;

最终我们选择了 plan B,移除严格模式：使用这个插件去除严格模式

babel-plugin-transform-remove-strict-mode

刚进入图片分享页面的时候，滑动条无法正常工作，经过我们认真的分析，发现，如果要初始化滑动条，必须要等 DOM 元素加载完毕，所以，我们把 初始化滑动条的代码，搬到了 mounted 生命周期函数中。

当滑动条调试 ok 后，发现tabbar 无法正常工作了，这时候，我们需要把每个 tabbar 按钮的样式中 'mui-tab-item' 重新改一下名字

获取所有分类，并渲染分类列表

制作图片列表区域

图片列表需要使用懒加载技术，我们可以使用 Mint-UI 提供的组件 'lazy-load'

根据'lazy-load'使用文档，尝试使用

渲染图片列表数据

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

实现了点击图片跳转到图片详情页面

在改造 li 成 router-link 的时候，需要使用 tag 指定要渲染为哪种元素

实现详情页面的布局和美化，同时获取数据渲染页面

实现图片详情中 缩略图的功能

使用插件 vue-preview 这个缩略图插件

获取到所有的图片列表，然后使用 v-for 渲染

注意： img 标签中的class不能去掉

注意：每个图片对象中，必须有 w 和 h 属性

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

##尝试在手机上 去进行项目的预览和测试

保证手机可以正常运行

要保证手机和开发项目的电脑处于用一个 WIFI环境中，也就是说，手机可以访问电脑的IP