该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

Vue 项目

首页的九宫格布局

  1. 使用 mui 中的 grid-default.html
  2. 添加图标并设置图标宽高
  3. 将背景颜色设置为白色
  4. 去掉九宫格的边框
  5. 修改了字体大小为 13px

实现动画效果

  1. 分许如何实现路由切换动效
  • 要使用 vue 提供的 transition 元素把 <router-view></router-view>包裹起来
  • 使用自定义的动画类名实现动画效果
  1. 当实现基本的动画效果之后需要解决一些问题:
  • 设置即将离开的页面的运行方向为 -100%
  • 为了防止页面跳动的问题,需要为离开的页面设置绝对定位
  • 当有组件切换动效的时候,一瞬间页面的宽度会变成正常宽度的2倍,此时需要隐藏超出屏幕宽度的区域

完成新闻资讯列表的配置

  1. 创建路由组件页面
  2. 改造路由链接
  3. 添加路由对应规则

回执新闻资讯页面的效果

  1. 使用mui中的media-list.html
  2. 使用display:flex实现了弹性盒模型布局,从而让元素左右贴边,justify-content:space-between

展示新闻列表的数据

  1. 当页面加载完成之后,就去获取页面数据,因此,应该在 created 钩子函数中调用获取数据的方法
  2. 在methods中,定义getNewsList()方法来获取数据this.$http.get()
  3. 在获取数据的时候,为了操作方便一些,用到asyncawait特性
  4. 当数据获取回来之后,如果想要通过v-for指令渲染到页面上,需要把数据挂载到data

定义全局的过滤器来格式化时间字符串

  1. 经过分析,整个项目中许多组件都需要格式化时间,推荐定义为全局的时间过滤器
  2. 定义全局过滤器的语法:Vue.filter('dateFormat',function(dataStr){}
  3. 调用过滤器的语法:<span>{{ item.add_time | dateFormat }}</span>
  4. 借助moment插件格式化时间
  5. 在设计时间过滤器的时候,为了提高用户体验度,可以为用户提供可选的格式字符串

以模块化的思想抽离 main.js 中的代码

  1. filter过滤器抽离成到filter模块中
  2. main.js中与vm没有很强关联关系的相关代码抽离到globalConfig.js

实现新闻列表到新闻详情的跳转

  1. 添加新闻详情组件
  2. 改造每一个新闻列表项的链接为 router-link,其中,to属性的id值,需要动态拼接给每一个router-link,因此,to属性需要改造成:to,然后统一路径前缀:/home/newsinfo/,后面拼接上item.id
  3. 添加路由规则
  4. 实现以上三步后,在页面中获取路由传递过来的参数:
  • $route.params.id获取,比较麻烦,老方法
  • 使用路由的props属性来传递参数
  • 改造路由规则,在对应规则中,添加props:true的属性
  • 在组件中,定义props:[],数组中定义的名称,就是路由规则中,对应参数的名称占位符(要保持一致)

渲染新闻详情页面

  1. 获取数据
  2. 挂载到data
  3. 渲染页面

评论子组件的封装和引用

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

获取评论内容

  1. 在评论组件中,需要获取新闻的id
  2. 通过属性传递的形式,父组件向子组件传递新闻的id
  3. 定义根据新闻idpage,获取评论数据的方法,并在created钩子中调用此方法获取数据
  4. 把获取到的数据,挂载到data上的cmtlist中,并渲染页面

点击加载更多的评论

  1. 加载更多按钮,绑定点击事件
  2. 在事件中,让page自增+1
  3. 如果重新调用获取更多评论内容的方法,刚获取到的那一页的数据,会覆盖之前的评论数据
  4. 在获取到评论数据之后,不应该直接this.cmtlist = data.message,而是应该this.cmtlist = this.cmtlist.concat(data.message)

实现发表评论的功能

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

改造图片的路由跳转

  1. 新建一个组件页面
  2. 改造路由链接 Home.vue
  3. 添加一个路由规则 router

实现图片分享列表中顶部的滑动区域

  1. 借助MUItap-top-webview-main.html控件来实现
  2. 拿到UI代码片段之后,需要把mui-fullscreen去掉
  3. 当页面布局没有大问题之后,发现无法实现滑动效果,此时需要使用官方推荐的形式,初始化一下控件,具体方式参考官方文档http://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中,使用了caller callee argument这些特性,但是这些特性在严格模式下不支持,会报错
  • 关闭webpack的严格模式,使用webpack的插件https://github.com/genify/babel-plugin-transform-remove-strict-mode

当移除严格模式后滑动效果还是无法实现

  1. 主要原因:需要在mounted钩子函数中来初始化
  2. 如果当前的图片分享列表组件还没有挂载到页面上,那么调用mui()初始化组件是没有任何意义的,因为此时页面上没有任何元素

如何移除滑动区域的警告问题

  1. mui-slider 类样式,添加 touch-action:pan-x; 属性样式,从而支持此元素的单指水平滑动,提高滑动的流畅度

获取图片分类数据并加载到页面上

  1. 获取分类数据
  2. 手动把全部分类信息,通过数组的 unshift 方法,头部追加到数组中
  3. 把获取到的分类,挂载到datacategory
  4. 默认设置全部分类被高亮选中,通过:class结合三元表达式,把id为0那一项分类,设置为默认选中

默认加载全部的分类数据

  1. 定义一个getPhotoByCategory方法,接收一个分类id,根据id获取所有的图片列表
  2. 把获取到的图片,挂载到photolist
  3. 根据Mint-UIlazy-load 组件,实现图片的懒加载效果
  • 在实现懒加载效果时,图片URL地址,需要通过 v-lazy 来指定
  • 需要把图片样式也粘贴到项目中,把image选择器改成img标签选择器

实现缩略图的效果

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

点击商品购买跳转到商品列表页面

  1. 添加商品列表的组件
  2. 改造商品购买为router-link
  3. 添加路由规则

实现商品列表的经典两列布局

  1. 外层有一个goods-list,里面的每个商品都是goods-item
  2. 给外层的goods-list设display:flex;布局,同时为了让一行只显示两个商品,为每个goods-item添加了width:49%,同时,设置了goods-listflex-warp:warp;
  3. 通过为父盒子添加padding:7px;来挤出左右的边距
  4. 为了保留中间的间隙,为父盒子goods-list添加了justify-content:space-between;

使用手机调试Vue项目

  1. 前提:保证手机和当前项目的电脑,处于同一个WiFi环境中
  2. 当手机和电脑处于同一个WiFi之后,运行终端命令ipconfig,查找无线局域网适配器的网络配置,复制IPV4地址
  3. 把复制的IP地址,粘贴到webpack.dev.js中 ''' module.exports = { dev: { host: '192.168.0.107', // 原为: hotst: 'localhost' } } '''

改造进入商品详情页面的路由链接

  1. 将每个商品item项改造成router-link,同时,提供tag=div属性将路由渲染成div,再指定一个:to属性,拼接上商品的id
  2. 添加新的组件页面
  3. 添加路由和组件的对应规则

实现商品详情页面的卡片视图布局

  1. 使用MUI提供的 card.html 实现

实现首页和商品轮播图的宽高设置

  1. 经过分析发现:首页和商品页面的轮播图,对于图片的宽有分歧
  • 首页期望图片是:宽高100%
  • 商品详情页面期望图片 高度100%,宽度自适应,图片居中
  1. 让轮播图组件,提供一个isfull属性,表示是否撑满父元素
  • 如果为true,宽和高都 100%
  • 如果为false,宽自适应,高100%,图片居中

Vuex

  1. vue项目中的数据从本质划分,分为两种:
  • 组件内部私有的数据(组件之间不会共享私有的数据)
  • 组件之间共享的数据(父组件共享子组件的数据,子组件共享父组件的数据,兄弟组件之间传值)
  1. 当组件之间要共享数据的时候,最好使用一个全局的数据存储对象来进行控制
  2. Vuex :实现组件之间数据共享的一种机制
  3. 只需要把数据挂载到vuex上就能共享数据,获取数据只需要从vuex上拿 ''' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state:{ // state 中存放的就是全局共享的数据 count:0 } }) new Vue({ render: (h) => h(App), router, // 将创建的共享对象,挂载到Vue实例中,这样,所有的组件就可以直接从store中获取全局的数据了 store, }).$mount('#app') '''

''' this.$store.state.全局数据名称 '''

空文件

简介

暂无描述 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化