# vue_learn

**Repository Path**: hyy1347716601/vue_learn

## Basic Information

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

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-04-29
- **Last Updated**: 2024-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是一个NB的项目

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

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

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

## [主流开源协议之间有何异同？](https://www.zhihu.com/question/19568896)

## 用(传统方式)命令行把修改过后的代码上传到码云？？？
1. git add .
2. git commit -m "提交信息"
3. 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 中的路由链接，展示对应的路由组件

## 制作首页轮播图布局

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

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

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

## 新闻资讯 页面 制作
1. 绘制页面，使用 MUI 中的 media-list.html
2. 使用vue-resource 获取数据
3. 渲染真实数据
4. 使用 `display:flex;` 实现了弹性盒模型布局，从而让 元素左右贴边;`justify-content; space-between` 

## 展示新闻列表的数据
1. 当页面加载完毕后，就要去获取页面数据，因此， 应该在 created 钩子函数中调用获取数据的方法
2. 在 methods中， 定义个 `getNewsList` 方法来获取数据 `this.$http.get()`
3. 在获取数据的时候，为了操作方便一点，我们可以用 `async` 和 `await` 特性
4. 当获取回来之后，如果想要通过`v-for` 指令循环渲染页面上，需要把数据 挂载到`data` 上（如果用 `Vue.prototype.$http = axios.create({})` )

## 定义全局的过滤器来格式化时间字符串
1. 经过分析，整个项目中，许多组件都需要格式化时间，因此，推荐定义为全局的时间过滤器；
2. 定义全局过滤器的语法: `Vue.filter('dataFormat',function(dataStr{}))`
3. 调用过滤器的语法：`<span>{{ item.add_time | dataFormat }}</span>`
4. 这个时间过滤器，如何格式化我们的时间呢？ 比较方便的方式，是借助与第三方的 `moment` 插件
5. 这个全局过滤器，定义到那个文件中呢？
6. 在设计事件过滤器的时候， 为了提供用户体验度（可能有的用户想要 最全的`年-月-日 时：分：秒`，有的用户只想要`YYYY-MM-DD`），此时，我们可以为过滤器提供一个可选的格式字符串；

##  以模块化的思想抽离 main.js 中的代码
1. 先把`filter` 过滤器，统一的抽离到了 `filter.js` 模块中
2. 当抽离完 `filter.js`之后，发现`main.js` 中，很多代码和 `vm` 实例没有很强的关联关系，因此，考虑把 这个全局配置相关的代码，单独抽离到 `globalConfig.js` 模块中；
3. 这样，我们在 `main.js` 不需要关心 全局配置文件中如何配置的，只需要导入这个全局配置即可；

## 实现了 新闻列表 到新闻详情 跳转
1. 添加新闻详情组件
2. 改在每一个 新闻列表 的链接，为`router-link` ,其中，`to` 属性中的id值，需要动态拼接给每一个router-link ，因此，需要把 `to` 属性， 改造成`:to` ,然后，属性值中的同一路径前缀`/home/newsinfo/` 应该被带引号包裹起来，后面，在拼接上 `item.id`即可；
3. 添加路由规则
4. 当实现了以上三步之后，我们想在页面中，获取路由传递过来的数据：
    + 方式1: `$route.params.id` 来获取，比较麻烦，是老的方式
    + 方式2： 使用路由的`props` 属性来传递参数：
     - 改造路由规则，在对应的规则中，添加`props:true`的属性
     - 在组件中，定义`props:[]`,数组中定义的名称，就是路由规则中，对应参数的名称占位符（要保持一致）

## 渲染新闻详情页面
1. 获取数据
2. 挂在数据到 data 上
3. 渲染页面

## 评论子组件的封装与引用
1. 在项目的创建 `src -> sub-components` 目录；
2. 创建一个标准的vue组件，命名为`Comment.vue` 作为我们评论的子组件
3. 那个页面需要引用这个评论组件了，就在页面的 script 节点中，通过 import的形式，导入子组件
4. 在页面的 script 中，通过`components` 属性注册导入的评论组件；
5. 吧注册的名称，以标签的形式，引入到页面上，就能够看到这个评论子组件了；

## 绘制评论子组件结构

## 获取评论内容
1. 前提：在评论组件中，需要获取到新闻id；
2. 通过父组件向子组件传值新闻的id；
3. 定义根据新闻Id 和 页码，获取评论数据的方法，并在 `created` 钩子中，调用此方法，获取数据；
4. 把获取到的数据，挂载到data上的从 cmtlist 中，并渲染页面；

## 点击加载更多评论
1. 为加载更多按钮，绑定点击事件；
2. 在事件中，让page 页码值 自增 +1 ；
3. 当页码值 +1 之后，重新调用获取评论内容 的方法；
    + 如果重新调用获取更多评论内容的方法，刚获取到的那一页的数据，会覆盖之前的评论数据；
    + 为防止上述的问题，我们在获取到评论数据之后，不应该直接 `this.cmtlist = data.message` ，而是应该`this.cmtlist = this.cmtlist.concat(data.message)`

## 实现发表评论的功能 
1. 在点击发表评论按钮的时候，处理函数中，做一下非法值校验，防止评论内容为空！
2. 如果校验通过，则调用API接口提交评论数据到后端；
3. 当评论成功后，需要在客户端，手动组指出一个新的评论组织，手动 unshift 到评论列表`cmtlist` 中；

## 改造图片分享的路由跳转
1. 新建一个组件页面；
2. 改造路由链接`HomeContainer.vue`
3. 添加一个路由规则`router.js`

## 实现图片分享列表中顶部的华东区域
1. 借助 MUI 的 `tab-top-webview-main.html` 控件来实现
2. 当拿到MUI 代码片段之后，需要把 `mui-fullscreen` 去掉
3. 当页面布局没有大问题时，无法实现滑动效果，此时，需要使用官方推荐的形式，去初始化一下控件，具体初始化的方式，参考官方文件`https://dev.dcloud.net.cn/mui/ui/#scroll`

## 当在项目中，引入了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
1. 分析问题的原因：
 + webpack 打包出来的 bundle.js中，默认启用了 严格模式
 + 在项目中，import中导入的mui.js，使用 callee caller 这些特性，但是这些特征在 严格模式不支持，会报错；
 + 经过分析：发现，关闭webpack 的严格模式，更容易一些，因为不再需要修改 mui.js 的源代码了

## 当移除严格模式之后滑动效果还无法实现
1. 主要原因：需要在`mounted`钩子函数中来初始化
2. 因为，如果当前的图片分享列表组件，还没有挂载到页面上，那么，调用`mui()`方法 初始化组件是没有任何意义的，因此此时页面上没有任何的元素；

## 如何移除滑动区域警告的问题
1. 为`mui-slider` 类样式，添加，`touch-action: pan-x` 属性样式，从而支持此元素的 单指水平滑动效果问题

## 解决 tabbar 区域和图片分类列表冲突JS行为冲突的问题
1. 冲突原因：每一个tabbar 按钮的类样式`mui-tab-item`和JS行为冲突；
2. 解决思路：把所以和`mui-tab-item`相关的样式粘出来，然后改个类名，重新把自己的类名，替换掉之前的即可

## 获取图片分类数据并加载到页面上
1. 获取分类数据
2. 手动把 `全部`分类信息，通过数组的 unshift 方法，头部追加到数组中
3. 把获取到的分类，挂载到 data 上的 category 中
4. 默认设置 `全部分类` 被高亮选中，通过 `:class` 结合三元表达式，把 `id`为0 的那一项分类，设置为默认选中；


## 默认加载全部的分类数据
1. 定义一个`getPhotoByCategory` 的方法，接受一个分类 id ，然后根据 Id获取所有图片列表
2. 把获取到的图片，挂载到 `photolist` 中
3. 根据 Mint-UI 的lazy-load 组件，实现图片的懒加载效果；
 + 在实现懒加载效果的时候，需要注意：图片的URL地址，需要通过 `v-lazy` 里指定；
 + 需要把图片的样式也粘贴到项目中，同时，把`image` 选择器修改为 `img` 标签选择器；

 ## 美化图片列表

 
 ## 点击图片分类，切换图片列表数据
 1. 为每一个分类，每一次点击发起一个数据请求

 ## 点击图片跳转到图片详情页面的路由改造
 1. 把每一个图片的li 改造成 `router-link` ，同时，要添加`tag = li`属性，而且，跳转的链接，需要使用 `:to`来设置，因为需要传递这个图片的id过去
 2. 添加一个路由规则，在规则中，使用`props` 来快速出传递路由中的参数；
 3. 添加路由对应的组件

 ## 开发图片的详情页面
 1. 根据`props` 中接受的图片的id，获取图片的详细数据
 2. 根据图片的详情，渲染页面最基本的结构
 3. 发表评论的功能，直接用现成的组件；
  + 使用import 把评论子组件导入到当前组件中
  + 把导入的评论组件对象，注册为 当前图片详情页面的子组件`components`
  + 以标签的形式，把注册号的评论子组件名称，引入到页面指定的区域
  + 注意：如果要实现评论的功能，需要在（以标签形式）引用评论组件的时候，为其传递一个`newsid` 的属性，属性值，应当是当前图片的id

  ## 实现缩略图的效果
  1. 先加载所有的图片并显示到页面上；
  2. 使用 `vue-preview` 插件来实现缩略图效果；
  3. 如何使用缩略图插件：
   + 运行`cnpm i vue-preview -S`安装
   + 在全局的配置文件`glabalConfig.js`中，安装此组件；
   ```
   import VuePreview from 'vue-preview'
   Vue.use(VuePreview)
   ```
   + 在页面中，先把获取到的图片，按照标准的格式做一层包装：为每个图片添加`w` 和 `h` 还有`msrc` 属性；
   + 把官方提供的例子中的 `img` 标签粘贴到页面中，去渲染数据就行了；


   ## 点击商品购买，条撞到商品列表页面
   1. 添加商品列表的组件
   2. 改造`商品购买` 为 `router-link` 
   3. 添加路由规则


   ## 实现商品的经典两列布局
   1. 外层有一个 `goods-list` ，里面的每个商品都是`goods-item`
   2. 给外层的`goods-list`设置`display:flex;`布局，同时为了让一行显示两个商品，我们为每一个`goods-item` 添加宽度为为 49%；同时，设置了`goods-list` 的`flex-wrap:wrap`;
   3. 通过为父盒子添加`padding:7px;`来挤出左右边框；
   4. 为了保留中间的间隙，为父盒子`goods-list`添加了`justify-content: space-between`；

   ## 使用手机调试Vue项目
   1. 前提，要保证自己的手机和当前做项目的电脑，处于同一个wifi环境中；
   2. 当手机和电脑处于同一个WIFI中之后，需要运行终端命令`ipconfig` ，查找 `无线局域网适配器` 的网络配置,复制`IPV4`的地址；
   3. 把复制的ip地址，粘贴到`package.json`中；`"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"`，
   将`--host`指令设置为wifi 的地址；
   4. 在确保手机和自己的电脑处于同一个wifi的前提下，而且，正确使用WIFI地址运行我们的项目之后，大家可以打开自己的手机浏览器，输入 IP地址 + 端口号，就能在手机上调试自己的网站了


   ## 改造进入商品详情页面的路由链接
   1. 将每个商品的item 项，改造成`router-link` ，同时，提供`tag="div"`属性把路由渲染为`div`，在指定一个`:to`，拼接上商品的id值；
   2. 添加新的组件页面；
   3. 添加路由和组件的对应规则；


   ## 实现商品详情页面的卡片试图布局
   1. 使用MUI提供的 card.html 卡片布局即可


   ## 实现商品详情页面轮播图效果

   ## 实现首页和商品轮播图的狂傲设置
   1. 经过分析发现:首页和商品页面的轮播图，对于图片的宽有分歧；
    + 首页期望图片时：宽高100%
    + 商品详情页面期望图片时：高度100%，宽度自适应，图片居中显示；
   2. 让轮播图组件，提供一个`isfull`属性，表示是否盛满父元素；
    + 如果为true，表示宽和高都要是100%
    + 如果为false，表示宽为自适应，高度为100%，同时图片居中显示

   ## 小球动画制作的Bug
   1. 原因：就是因为小球入场动画的终点坐标已经固定写死了！
   2. 解决问题的突破点：把小球 translate 的时候，横纵坐标，动态写活即可；
   3. 如何实现：如何把横纵坐标动态获取
    + 先动态获取小球的横纵坐标，
    + 在动态获取会标的横纵坐标，
    + 让徽标的横纵坐标 - 小球的横纵坐标得到相对移动位置(`developer.mozilla.org/zh-CN/docs/Web/API/Element/getboundingClientRect`)


    ## 使用vuex
    1. 运行`cnpm i vue -S`
    2. 导入vuex     ``` import Vuex from 'Vuex'```
    3. 安装Vuex `Vue.use(Vuex)`
    4. 创建store 公共状态对象 
    ``` 
    const store = new Vuex.Store({
        state:{
            // status 中存放的，就是全局共享的数据
            count:0
        }
    })
    ```
    5. 将创建的`store` 挂载到vm实例当中 
    6. 如果想要在组件中访问全局的数据 `this.$store.state.count`