![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue 移动端项目
文章平均质量分 81
Hyman-ya
这个作者很懒,什么都没留下…
展开
-
Vue 移动端 实战九 编辑用户资料、修改呢称、生日、性别、头像、以及头像的剪裁器依赖使用、Content-Type 要求的 multipart/form-data 格式
编辑用户资料1.0 创建组件并配置路由1、创建 views/user/index.vue<template> <div> <van-nav-bar title="个人信息" left-arrow right-text="保存" /> <van-cell-group> <van-cell title="头像" is-link> <van-image round原创 2021-06-26 17:33:31 · 1674 阅读 · 0 评论 -
Vue 移动端 实战八 文章评论 评论列表组件、点赞、发布评论、评论回复等、Vue依赖注入方法、解决列表重复数据问题和不重新获取数据问题
1.0 展示文章评论列表1.1 准备组件为了更好的开发和维护,这里我们把文章评论单独封装到一个组件中来处理。1、创建 src/views/article/components/article-comment.vue<template> <div class="article-comments"> <!-- 评论列表 --> <van-list v-model="loading" :finished="finishe原创 2021-06-25 20:19:58 · 3340 阅读 · 3 评论 -
Vue 移动端 实战七 文章详情、关注用户、点赞、收藏等公共组、后端返回数据中的大数字问题、图片点击预览组件使用
1.0 文章详情1.1 创建组件并配置路由1、创建 views/article/index.vue 组件<template> <div class="article-container">文章详情</div></template><script>export default { name: 'ArticleIndex', components: {}, props: { // 通过路由参 解耦的形式原创 2021-06-20 15:19:14 · 871 阅读 · 0 评论 -
Vue 移动端 实战六 文章搜索 关键字高亮的技巧、本地数据的储存和调用、防抖插件的调用
文章搜索1.0 创建组件并配置路由1、创建 src/views/search/index.vue<template> <div class="search-container">搜索页面</div></template><script> export default { name: "SearchPage", components: {}, props: {}, data() { re原创 2021-06-18 14:20:39 · 336 阅读 · 1 评论 -
Vue 移动端 实战五 频道编辑 组件的调用
首页—频道编辑1.0 处理页面弹出层Vant 中内置了 Popup 弹出层 组件。1、在 data中添加一个数据用来控制弹层的显示和隐藏data () { return { ... isChannelEditShow: true // 这里我们先设置为 true 就能看到弹窗的页面了 }}2、然后在首页模板中的频道列表后面添加弹出层组件<!-- 频道编辑 --><van-popup class="edit-channel-popup" v-原创 2021-06-17 16:07:04 · 214 阅读 · 1 评论 -
Vue 移动端 实战四 首页-文章列表 头部导航、tab标签、list列表组件、dayjs插件、处理第三方图片资源问题
首页—文章列表max-width: unset; // 取消使用flex: unser // 取消使用flex/deep/ 深度作用操作符!!!!! 对于 scoped 为了影响里面所有的后代元素flex-shrink: 1; 默认是 1 ,参与 flex布局的计算, 改为 0 就是不参与 flex的布局计算vh 个 vw 单位 重点!!!!!!!!!!!!!!!!1.0 页面布局1.1 头部导航栏1、使用导航栏组件2、在导航栏组件中插入按钮文本图标3、样式原创 2021-06-15 23:10:17 · 487 阅读 · 0 评论 -
Vue 移动端 实战三 个人中心 优化 token
1.0 个人中心1.1 TabBar 处理通过分析页面,我们可以看到,首页、问答、视频、我的 都使用的是同一个底部标签栏,我们没必要在每个页面中都写一个,所以为了通用方便,我们可以使用 Vue Router 的嵌套路由来处理。父路由:一个空页面,包含一个 tabbar,中间留子路由出口子路由首页问答视频我的一、创建 tabbar 组件并配置路由这里主要使用到的 Vant 组件:[Tabbar 标签栏](创建 src/views/layout/index.vue&l原创 2021-06-12 16:30:53 · 988 阅读 · 0 评论 -
Vue 移动端 实战二 登录和注册 定时器的用法、Token过期问题(处理 刷新的token和 自动的token)
1.0 登录注册目标能实现登录页面的布局能实现基本登录功能能掌握 Vant 中 Toast 提示组件的使用能理解 API 请求模块的封装能理解发送验证码的实现思路能理解 Vant Form 实现表单验证的使用2.0 准备2.1 创建组件并配置路由1.创建 src/views/login/index.vue 并写入以下内容<template> <div class="login-container">登录页面</div></tem原创 2021-06-11 20:41:41 · 949 阅读 · 0 评论 -
Vue 移动端 实战一项目初始化 创建项目、git版本管理、调整初始结构、导入图标素材、引入vant、移动端 rem适配、.postcssr配置介绍、封装axios
项目初始化目标能使用 Vue CLI 创建项目了解 Vant 组件库的导入方式掌握制作使用字体图标的方式掌握如何在 Vue 项目中处理 REM 适配理解 axios 请求模块的封装1.0 使用 Vue CLI 创建项目如果你还没有安装 VueCLI,请执行下面的命令安装或是升级npm install --global @vue/cli在命令行中输入以下命令创建 Vue 项目:vue create toutiao-m (-m 表示的移动端)Vue CLI v4原创 2021-06-11 14:20:06 · 283 阅读 · 0 评论