# vue001

**Repository Path**: fengkaiyan/vue001

## Basic Information

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

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#这是一个NB的项目

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

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

####丫的，实在编不下去了,啥啥啥

##[主流开源协议之间有何异同？](https://www.jianshu.com/p/524e4b3c5147)

##用传统方式把修改过后的代码上传到码云？？？
1、git add .
2、git commit -m "提交信息"
3、git push

##制作首页App组件
1、完成Header区域，使用的是mint-ui中的Header组件
2、制作底部的Tabber 区域，使用的是mui的Tabbar.html
+在制作 购物车小图标的时候，操作会相对多一些
+先把扩展图标的css样式，拷贝到项目中
+拷贝扩展字体库ttf文件，到项目中
+为购物车小图标，添加以下样式'mui-icon mui-icon-extra mui-icon-extra-cart'
3、要在中间区域放置一个router-view来展示路由匹配到的组件

##改造tabbar为router-link

##设置路由高亮

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

##制作首页轮播图布局

##加载shouye 轮播图数据
1、获取数据，如何获取呢，使用vue-resource
2、使用vue-resource的this.$http.get获取数据
3、获取到的数据，要保存到data上
4、使用v-for循环渲染每个item项

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

##页面滑动

##改造新闻资讯
绘制页面

##实现新闻详情的布局与数据渲染

##单独封装一个comment.vue评论子组件
1、先创建一个单独comment.vue组件模板
2、在使用comment组件的页面中，手动导入comment组件
+`import comment form './comment.vue''`
3、在父组件中，使用'components'属性，将刚才导入comment组件，
注册为自己的子组件
4、将注册子组件的注册名称
，以标签形式，在页面中引用即可

##获取所有评论数据，显示到组件中

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

##发表评论
1、把文本框做双向数据绑定
2、为发表按钮绑定一个事件
3、校验评论内容是否为空，如果为空，则Toast提示用户 评论内容不为空
4、通过v-resource发送一个请求，把评论内容提交给服务器
5、当发表评论OK后，重新刷新列表，以查看最新的评论

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

##绘制图片列表 组件页面结构并美化样式
1、制作顶部的滑动条
2、制作底部的图片列表

###制作顶部滑动条的坑
1、需要借助于MUI中的tab-top-webview-main.html
2、需要把slider区域的mui-fullscreen类去掉
3、顶部导航条不能滑动，发现文档内容[区域滚动组件默认为absolute定位，全屏显示；在实际使用过程中，需要手动设置滚动区域的位置（top和height）若使用区域滚动组件，需手动初始化scroll控件]
先引入mui.js包，再初始化控件
```
mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
```
4、初始化控件后出现以下错误：`mui.min.js:936 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them`
根据推理，这是mui.min.js的非严格代码与webpack打包的babel.js的严格模式发生冲突
解决方案:1、将mui.js的非严格代码改为严格模式 ---不现实
        2、将babel.js严格模式禁用 
1）下载yarn add babel-plugin-transform-remove-strict-mode插件
2） .babelrc
{
  "plugins": ["transform-remove-strict-mode"]
}
// ,"transform-remove-strict-mode"
3）在.babelrc加入
  "ignore": [
    "./src/lib/mui/js/mui.min.js"
    ],
#######那个插件没有用 只要3）点就好了
5、解决node-sass安装不成功的问题
set
SASS_BINARY_PATH=C:\Users\Administrator\.npminstall_tarball\node-sass\4.9.3\win32-x64-57_binding.node
6、刚进入图片分享页面的时候，滑动条无法正常工作，经过我们认真的分析，发现，
如果要初始化滑动条，必须等DOM元素加载完毕，所以，我们要把初始化滑动条的代码，搬到mounted钩子函数当中
7、当滑动条调试成功是，发现tabbar无法正常工作，这时候，我们需要把每个tabbar按钮样式中的`mui-tab-item`重新改一下名字
8、获取所有分类，并渲染分类列表

###制作图片列表区域
使用mint-ui的懒加载加载图片

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

##实现了图片点击跳转到图片详情页面
1、在改造li成router-link的时候，需要使用tag属性指定要渲染为哪种元素

##实现详情页面的布局和美化

##实现图片详情中的缩略图功能
1、使用vue-preview插件 （缩略图）
2、获取所有图片列表后，用v-for渲染为对象
3、注意：img中的class不能去掉
4、每个图片对象必须有w h属性
 
 ## 绘制商品列表页面基本结构并美化

 ##尝试在手机上进行项目的预览和调试
 1、要保证自己的手机可以正常运行 
 2、要保证手机和开发项目的电脑处于同一个局域网
 3、在package.json文件，在dev脚本中，添加一个--host指令，把当前电脑的ip地址，设置为--host指令值