2020年02月_viceen

原创渲染列表 (七) -优化-缓存组件—返回网页原位置-keep-alive缓存组件-包裹动态组件-按需缓存单独配置-meta { keepAlive true } & activated 激活组件触发

优化-缓存组件—返回网页原位置-keep-alive 缓存组件-将其动态组件包裹起来-按需缓存，单独配置——meta: { keepAlive: true } & activated 激活组件触发keep-alive 缓存组件：https://cn.vuejs.org/v2/guide/components-dynamic-async.html#在动态组件上使用-keep-alive...

2020-02-29 21:23:17 1243

原创渲染列表 (六) -图片懒加载-逐渐加载图片-两种方式：单独安装vue-lazyload 插件和 vant 提供的 Lazyload 组件

图片懒加载-逐渐加载图片-两种方式：单独安装vue-lazyload 插件和 vant 提供的 Lazyload 组件设置lazy-load属性来开启图片懒加载，需要搭配 Lazyload 组件使用image图片组件-懒加载模式：https://youzan.github.io/vant/#/zh-CN/image#tu-pian-lan-jia-zailazyload图片懒加载：htt...

2020-02-29 15:40:24 1128

原创渲染列表 (五) -时间格式处理-dayjs插件更轻量——设置相对时间格式relativeTime 和 i18n国际化中文转换：zh-cn

时间格式处理-dayjs插件更轻量——设置相对时间格式relativeTime 和 i18n国际化中文转换：zh-cn第一步：打开npm官网，进行搜索 dayjs第二步：选择第一个 dayjs，进入后选择简体中文https://github.com/iamkun/dayjs/blob/HEAD/docs/zh-cn/README.zh-CN.md第三步：命令行安装包npm inst...

2020-02-29 15:14:52 3294 1

原创渲染列表 (四) -上拉加载onLoad-下拉刷新onRefresh & 工具函数 $sleep-做一秒的延时

上拉加载 onLoad第一步：导入api接口真实数据模块src/api/article.js在 src/vies/home/index.vue中的script里import { getArticles } from ‘@/api/article’第二步： src/vies/home/index.vue中的methods里async onLoad () { ...

2020-02-29 14:05:26 815

原创渲染列表 (三) - 获取列表数据API封装-在src下的api里新建js文件 - 提供文章相关的接口调用的函数

渲染列表- 获取列表数据API封装-在src下的api里新建js文件 - 提供文章相关的接口调用的函数获取列表数据API封装新建 src/api/article.js// 提供文章相关的接口调用的函数import request from '@/utils/request'/** * 获取文章列表 * @param {Integer} channelId - ...

2020-02-28 23:51:22 367

原创渲染列表 (二) -组织数据-频道列表对应内容-map遍历数组语法：依靠旧数组，生成一个新数组 & item = {} 之前：如果只有return 数据（注意对象不行, ({})）

组织数据-map遍历数组语法：依靠旧数组，生成一个新数组 & item => {} 之前：如果只有return 数据（注意对象不行, ({})）分析：文章列表与频道关系结论：频道数据应该包含文章列表数据map遍历数组语法：依靠旧数组，生成一个新数组src/vies/home/index.vue中的methods里// 获取频道列表 async getMy...

2020-02-28 23:28:47 255

原创渲染列表 (一) -渲染频道-手动安装npm i vue-router@3.0.7 & 新建api函数-提供频道相关接口操作函数 & 判断是否登录—— 头部是否有token

渲染频道-手动安装npm i vue-router@3.0.7 & 新建api函数-提供频道相关接口操作函数 & 判断是否登录—— 头部是否有tokenvue-cli安装的默认vue-router的是3.0.3版本，点击我的界面控制台会报错存在问题 (可在package.json中查看版本)需手动安装指定版本npm i vue-router@3.0.7第一步：...

2020-02-28 22:30:31 708

原创首页-文章列表 (三) -列表文章布局-Cell 单元格组件-一张图和三张图 & van-ellipsis 内容超过一行会省略 & w33-宽度33%剩余1%做了图片之间间隙.md

列表文章布局-Cell 单元格组件-Cell 单元格组件：https://youzan.github.io/vant/#/zh-CN/cell结构：src/views/home/index.vue放在van-cell标签内容盒子里三张图<div class="article_item"> <h3 class="van-ellipsis">PullRefre...

2020-02-28 21:33:54 1508

原创首页-文章列表 (二) 02-实现下拉刷新-PullRefresh 下拉刷新组件-获取数据、更新状态、消息提示、单页面补全

实现下拉刷新-PullRefresh 下拉刷新组件-获取数据、更新状态、消息提示、单页面补全PullRefresh 下拉刷新组件：https://youzan.github.io/vant/#/zh-CN/pull-refresh看好所刷新内容的区域结构：src/views/home/index.vue+<van-pull-refresh v-model="downLoading" ...

2020-02-27 21:10:41 439

原创首页-文章列表 (二) 01-实现上拉加载-List 列表组件-模拟数据全部加载完成-v-for和：key遍历数据

实现上拉加载-List 列表组件-模拟数据全部加载完成-v-for和：key遍历数据List 列表组件：https://youzan.github.io/vant/#/zh-CN/list结构：src/views/home/index.vue<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @l...

2020-02-27 17:17:04 224 1

原创首页-文章列表 (一) -使用tabs组件-swipeable 给标签栏增加手势功能 & vueloader-CSS深度作用选择器deep & 三横汉堡菜单应用-before伪元素设置样式

使用tabs组件-swipeable 给标签栏增加手势功能 & vueloader-CSS深度作用选择器/deep/ & 三横汉堡菜单应用-::before伪元素设置样式tab标签页组件-标签栏滚动模式：https://youzan.github.io/vant/#/zh-CN/tab基础结构：src/views/home/index.vue// swipeable 给标签...

2020-02-27 16:45:25 1590

原创登录模块 (三) -进行登录-导入request工具函数-toast轻提示组件-mapMutations修改数据-this.$router.push（）跳转方法

进行登录-导入request工具函数-toast轻提示组件-mapMutations修改数据-this.$router.push（）跳转方法toast轻提示组件：https://youzan.github.io/vant/#/zh-CN/toast封装api src/api/user.js ——用户相关的API调用//注释js代码/***登录*@param{string...

2020-02-27 14:09:41 350

原创登录模块 (二) -表单校验-绑定错误信息和表单数据 .trim-修饰符去两边空格 & @blur-失去焦点事件 & 校验手机号和验证码

表单校验-绑定错误信息和表单数据 .trim-修饰符去两边空格 & @blur-失去焦点事件 & 校验手机号和验证码:error-message 绑定错误信息属性有值显示错误信息。没有显示正确，无提示信息。第一：绑定错误信息第二：绑定表单数据第三：当失去焦点后，对当前表单元素的数据进行校验获取数据——>校验格式、校验是否输入——...

2020-02-27 14:04:08 868

原创登录模块 (一) 02-修改vant主题蓝色——引入是less文件 & 使用vue-cli的配置-新建vue.config.js文件修改颜色变量

修改vant主题蓝色第一步：src/main.js// css中无变量 Less中有变量，可声明蓝色import Vant from 'vant'-import 'vant/lib/index.css'+import 'vant/lib/index.less'第二步：新建src/vue.config.js vue-cli的配置//添加webpack的打包配置module.ex...

2020-02-27 10:51:55 1657 2

原创登录模块 (一) 01-基础布局-登录login页面-field输入框组件

基础布局-登录login页面-field输入框组件field输入框-错误提示模式：https://youzan.github.io/vant/#/zh-CN/fieldsrc/views/user/login.vue界面<div class="page-login"> <van-nav-bar left-arrow @click-left="$router.b...

2020-02-27 10:29:27 799

原创 token应用 (三) 05-拦截登录-导航守卫-地址 user 开头和本地没有token信息-重定向redirect到登录页面

拦截登录-导航守卫-地址 /user 开头和本地没有token信息-重定向到登录页面src/router.jsimport store from '@/store'// 登录拦截导航守卫——/user /user/profile /user/chat 需要登录router.beforeEach((to, from, next) => { //当前路由地址...

2020-02-27 09:40:16 1956

原创 token应用 (三) 04-处理401的流程-响应拦截器——处理token失效-回跳地址传递

处理token失效当前路由对应的路由信息对象：https://router.vuejs.org/zh/api/#router-currentroutetoken 用于访问需要身份认证的普通接口，有效期2小时refresh_token 用于在token过期后，获取新的用户token，有效期14天它可以获取新的有效token，无需重新登录。在src/utils/request.j...

2020-02-27 09:10:31 3656 1

原创 token应用 (三) 03-初步request工具封装-调接口&拦截器-toLowerCase() 转换为小写-axios实例2个配置——1.共同域名作为基准地址&2.响应内容判try和catch

初步request工具封装–配置&拦截器目的：用来封装调用接口的方法、地址、请求方式、传参，将来直接调用；导出一个能调接口的方法，提供一个配置好的 axios，基于axios提供一个请求函数安包npm i axiosnpm i json-bigint封装工具函数request的步骤：1.通过creat创建新的实例，给新的实例添加请求拦截器...

2020-02-26 21:33:16 600

原创 token应用 (三) 02-vuex状态管理token-共享token数据,在vuex中更好操作 & state-申明数据，mutations中——登陆功能-存储用户信息 &退出登陆-清除用户信息

vuex状态管理token-共享token数据,在vuex中更好操作 & state-申明数据， mutations中—— 登陆功能-存储用户信息 & 退出登陆- 清除用户信息src/store.jsimport Vue from 'vue'import Vuex from 'vuex'//一项导入3个方法import * as auth from '@/utils/a...

2020-02-26 01:39:24 521

原创 token应用 (三) 01-本地存储token-关闭浏览器后再次打开，需要保持登录状态-localStorage-JSON.parse()【从一个字符串中解析出json对象】

本地存储token-localStorage-JSON.parse()【从一个字符串中解析出json对象】src/utils/auth.js// auth 认证信息（token）操作本地存储模块const USER_KEY = 'hm-toutiao-m-79-user'// 获取export const getUser = () => { //JSON.parse(...

2020-02-26 01:16:08 1581

原创项目架构 (二) 04-其他功能组件-Skeleton骨架屏组件-占位 & $router-可以调用方法 back方法-可以根据路由地址进行回退，对应的是push方法

其他功能组件home-index 首页组件<template> <div class='container'>Home</div></template><script>export default { name: 'home-index'}</script><style scoped lang...

2020-02-26 00:53:32 428

原创项目架构 (二) 03-全局样式-新建src-styles-index.less文件后在src-main.js中导入

全局样式设置全局样式，尤其是导航栏的背景蓝色第一步：在src/main.js中导入import ‘@/styles/index.less’新建全局样式文件：src/styles/index.less// -----------------------全局样式-----------------------//清除内外间距*{ margin: 0; padding: 0;...

2020-02-26 00:16:49 968

原创项目架构 (二) 02-完成Layout组件（上下导航栏布局-NavBar导航栏组件-Tabbar标签栏组件 &overflow hidden-内容被修剪不可见 & border-box-没外边距

完成Layout组件（布局）Layout 布局组件-此处用导航栏，未使用：https://youzan.github.io/vant/#/zh-CN/colNavBar 导航栏组件：https://youzan.github.io/vant/#/zh-CN/nav-barTabbar 标签栏组件： https://youzan.github.io/vant/#/zh-CN/tabbar在s...

2020-02-25 23:50:53 630

原创项目架构 (二) 01-约定路由规则-一级路由-二级路由的配置 & 实例基础上增加额外配置

约定路由规则path功能路由级别/布局组件一级路由├─ /首页组件二级路由├─ /question问答组件二级路由├─ /video视频组件二级路由├─ /user个人中心组件二级路由/user/profile编辑资料组件一级路由/user/chat小智同学组件一级路由/login登录组件一级路由...

2020-02-25 22:44:14 345

原创项目起步 (一) 02-版本控制- 使用Vant - Rem适配——postcss-pxtorem插件和插件amfe-flexible & 基准值37.5rem

版本控制创建远程仓库# （空）仓库地址# https://gitee.com/zhoushugang/hm-toutiao-m-79提交git add .git commit -m '初始化'推送远程仓库# 加别名origingit remote add origin git@gitee.com:zhoushugang/hm-toutiao-m-79.git# ...

2020-02-25 22:07:51 1413 1

原创项目起步 (一) 01-项目介绍-使用技术-创建项目-调整目录结构——黑马头条移动端

项目介绍首先，黑马头条移动端是一个IT资讯移动web应用，有着和今日头条一样的资讯浏览体验。主要功能：资讯列表、标签页切换，文章举报，频道管理、离线频道，文章详情、阅读记忆，关注功能、点赞功能、评论功能、回复评论、搜索功能、登录功能、个人中心、编辑资料、小智同学、问答功能、视频功能 …最后，黑马头条可打包成一款移动APP，后期结合H5+可在Dcloud打包成一款体验较好的手机应用...

2020-02-25 12:16:41 3142 3

原创 vuex案例-豆瓣接口

vuex案例-豆瓣接口jsonp使用方法：https://www.npmjs.com/package/jsonp豆瓣接口地址支持jsonp但是不支持cors。http://api.douban.com/v2/movie/subject/:id 详情http://api.douban.com/v2/movie/in_theaters 正在热映http://api.douban.com...

2020-02-24 23:59:24 472

原创 vuex-com-a.vue组件-文件

vuex-com-a.vue组件-文件src/components/com-a.vue<template> <div class='container'> COM-A <button @click="fn(100)">自增</button> <button @click="asyncGetData({id:100})">异...

2020-02-24 23:58:44 107

原创 vuex-App.vue文件

vuex-App.vue文件src/App.vue<template> <div id="app"> <h3>vuex-demo-79</h3> <com-a></com-a> <hr> <com-b></com-b> </div>&...

2020-02-24 23:49:27 221

原创 vuex-main.js文件

vuex-main.js文件src/main.jsimport Vue from 'vue'import App from './App.vue'Vue.config.productionTip = false// 配置vuex的步骤// 1. 安装 npm i vuex// 2. 导入import Vuex from 'vuex'// 3. 注册Vue.use(Vue...

2020-02-24 23:48:42 956

原创 vuex基础-详细版

vuex基础-介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。中文官网：https://vuex.vuejs.org/zh/我们理解：vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。即：vuex是用来...

2020-02-24 22:52:10 342

原创 vuex基础 (四) 02-mapActions（辅助函数）——通过mapActions函数可以生成methods中函数

06-vuex基础-mapActions（辅助函数）——通过mapActions函数可以生成methods中函数网址：https://vuex.vuejs.org/zh/api/#mapactionsmapActions辅助函数，把actions中的函数映射组件methods中通俗：通过mapActions函数可以生成methods中函数// 在methods中申明了一个函数getCo...

2020-02-24 22:35:26 1018

原创 vuex基础 (四) 01-actions（异步获取数据）——Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象

05-vuex基础-actions（异步获取数据）——Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象网址：https://vuex.vuejs.org/zh/guide/actions.html异步获取数据第一步：定义：在src/main.js中：//申明数据 state:{ //申明数据,相当于vue实例中的data...

2020-02-24 21:52:05 3130

原创 vuex基础 (三) 02-mapMutations（辅助函数）——通过mapMutations函数可以生成methods中函数方法，写法更简单

04-vuex基础-mapMutations——通过mapMutations函数可以生成methods中函数方法，写法更简单网址：https://vuex.vuejs.org/zh/api/#mapactions把vuex中的mutations的函数映射到组件的methods中通俗：通过mapMutations函数可以生成methods中函数第一步：在使用组件com-a.vue中导入m...

2020-02-24 20:23:13 1410

原创 vuex基础 (三) 01-mutations——修改数据-可看成事件，在src-main.js中的store声明的vuex实例中进行定义

03-vuex基础-mutations——修改数据，在src-main.js中的store声明的vuex实例中进行定义修改数据更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更...

2020-02-24 13:00:07 995

原创 vuex基础 (二) 02-mapState(辅助函数)——帮助我们生成计算属性，简洁的使用vuex数据

02-vuex基础-mapState(辅助函数)——帮助我们生成计算属性，简洁的使用vuex数据当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。网址：https://vuex.vuejs.org/zh/guide/state.html把vuex中的state数据映射到...

2020-02-24 11:50:05 783

原创 vuex基础 (二) 01-state——申明数据，相当于vue实例选项中的data & 计算属性，其实就是一个方法，用来声明数据，且必须要有返回值

01-vuex基础-state——申明数据，相当于vue实例选项中的data管理数据在src/main.js中：// 初始化vuex对象const store = new vuex.Store({ // 配置项 state: { // 管理数据，相当于vue实例选项中的data count: 0 }})在组件中获取state的数据：原始用法插值...

2020-02-24 09:40:34 726

原创 vuex基础 (一) -介绍——管理组件之间的共享数据 & 初始化功能

vuex基础-介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。中文官网：https://vuex.vuejs.org/zh/我们理解：vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。即：vuex是用来...

2020-02-24 09:30:01 249

原创 webpack基础2——webpack.config.js文件内容

webpack基础2——webpack.config.jsconst path = require('path')// 生成html在dist目录下const HtmlWebpackPlugin = require('html-webpack-plugin')// 清理 dist 目录参考 https://webpack.js.org/guides/output-management/...

2020-02-23 09:52:19 151

原创 webpack基础1——package.json文件内容

webpack基础——package.json文件内容{ "name": "webpack-demo-79", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exi...

2020-02-23 09:51:33 341

空空如也

发布文章的题目，从100个字降到30个字了，英文字母多一些就不够用