Vue移动项目day02
二、登录注册
目标
能实现登录页面的布局
能实现基本登录功能
能掌握 Vant 中 Toast 提示组件的使用
能理解 API 请求模块的封装
能理解发送验证码的实现思路
能理解 Vant Form 实现表单验证的使用
准备创建组件并配置路由1、创建 src/views/login/index.vue 并写入以下内容
<template> <div class="login-container">登录页面</div></template><script>export default { name: 'LoginPage', components: {}, props: {}, data () { return {} }, computed: {}, watch: {}, created () {}, mo ...
Vue移动项目day03
三、个人中心
TabBar 处理通过分析页面，我们可以看到，首页、问答、视频、我的 都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理。
父路由：一个空页面，包含一个 tabbar，中间留子路由出口
子路由
首页
问答
视频
我的
一、创建 tabbar 组件并配置路由
这里主要使用到的 Vant 组件：
Tabbar 标签栏
1、创建 src/views/layout/index.vue
<template> <div class="layout-container"> <!-- 子路由出口 --> <router-view /> <!-- /子路由出口 --> <!-- 标签导航栏 --> <!-- route: 开启路由模式 --> <van-tabbar class="layout-tabbar" ...
Vue移动项目day04
四、首页—文章列表
页面布局头部导航栏1、使用导航栏组件
2、在导航栏组件中插入按钮
文本
图标
3、样式调整
宽高
背景色
边框
文本大小
图标大小
<template> <div class="home-container"> <!-- 导航栏 --> <van-nav-bar class="page-nav-bar"> <van-button class="search-btn" slot="title" type="info" size="small" round icon="search" >搜索</van-button> </van-nav-bar> <!-- /导航栏 --> </div> ...
Vue移动项目day06
六、文章搜索
创建组件并配置路由1、创建 src/views/search/index.vue
<template> <div class="search-container">搜索页面</div></template><script> export default { name: "SearchPage", components: {}, props: {}, data() { return {}; }, computed: {}, watch: {}, created() {}, methods: {} };</script><style scoped></style>
2、然后把搜索页面的路由 ...
前端性能优化
前端性能优化课程介绍任何小型企业，博主或成长型公司在网上出现时面临的最大挑战之一就是“页面加载时间”问题。除非您能确保尽可能快速无缝地加载每个页面，您才可以拥有世界上最好最引人注目的网站，否则您仍然无法赢得关注者的尊重和忠诚度。
根据当今网络上的所有主要浏览器公司的说法，如果每个网站都想要排名靠前，表现良好并确保客户满意，那么每个网站都需要快。毕竟，如果您的网页加载速度很慢，那么您会立即增加客户开始在其他地方搜索信息，而不是坚持下去的风险。
这也是为什么很多公司去找专门的技术人员来做SEO（Search Engine Optimization），即搜索引擎优化。 因为，页面的加载会影响到爬虫的爬取，页面加载速度是一项非常重要的指标。况且，页面优化直接影响到了用户体验。所以学习前端性能优化势在必行。
经常有面试官会问：从用户输入浏览器输入url到页面最后呈现 有哪些过程？有什么办法能优化页面性能？
答案大致如下：
用户输入URL地址
浏览器解析URL解析出主机名
浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时 ...
Vue移动项目day09
九、用户页面
该模块作为学生作业，不讲解，仅供源码参考。
创建组件并配置路由1、创建 views/user/index.vue
<template> <div class="user-container">用户页面</div></template><script>export default { name: 'UserPage', components: {}, props: {}, data () { return {} }, computed: {}, watch: {}, created () {}, mounted () {}, methods: {}}</script><style scoped></style&g ...
Vue移动项目day07
七、文章详情创建组件并配置路由1、创建 views/article/index.vue 组件
<template> <div class="article-container">文章详情</div></template><script>export default { name: 'ArticleIndex', components: {}, props: { articleId: { type: [Number, String], required: true } }, data () { return {} }, computed: {}, watch: {}, created () {}, mounted () {}, methods ...
Vue移动项目day10
十、编辑用户资料
创建组件并配置路由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 width="30" height="30" fit="cover" src="http://toutiao.meiduo.site/FgSTA3msGyxp5-Oufnm5c0kjVgW7" /> </van-cell> <van-cel ...
Vue移动项目day08
八、文章评论展示文章评论列表准备组件为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。
1、创建 src/views/article/components/article-comment.vue
<template> <div class="article-comments"> <!-- 评论列表 --> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-for="item in list" :key="item" :title="item"> <van-image slot="icon& ...
cropper基本用法
1. 基本使用步骤
在 <head> 中导入 cropper.css 样式表：
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：
<script src="/assets/lib/jquery.js"></script><script src="/assets/lib/cropper/Cropper.js"></script><script src="/assets/lib/cropper/jquery-cropper.js"></script>
在卡片的 layui-card-body 主体区域中，定义如下的 HTML 结构：
<!-- 第一行的图片裁剪和预览区域 --><div class="row1&qu ...
大事件项目day01
0. 资源地址
线上 DEMO 项目地址：http://www.escook.cn:8086/
项目的 API 接口地址： https://www.showdoc.cc/escook?page_id=3707158761215217
1. 项目前期的准备工作1.1 初始化项目结构
将 素材 目录下的 assets 和 home 文件夹，拷贝到 code 目录下
在 code 目录下新建 login.html 和 index.html 页面
1.2 使用GitHub管理大事件的项目
在 code 目录中运行 git init 命令
在 code 目录中运行 git add . 命令
在 code 目录下运行 git commit -m "init project" 命令
新建 Github 仓库 web_bigevent
将本地仓库和Github仓库建立关联关系
将本地仓库的代码推送到Github仓库中
运行 git checkout -b login 命令，创建并切换到 login 分支
1.3 安装VSCode的Live Server插件辅助开发
在插件市场 ...
vuex基础
vuex基础-介绍
为什么会有Vuex ?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用**集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测**的方式发生变化。
vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。
结论
修改state状态必须通过**mutations**。
**mutations**只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行。
执行异步代码，要通过actions，然后将数据提交给mutations才可以完成。
state的状态即共享数据可以在组件中引用。
组件中可以调用action。
vuex基础-初始化功能
建立一个新的脚手架项目, 在项目中应用vuex
vue create demo
开始vuex的初始化建立，选择模式时，选择默认模式
初始化：
第一步：npm i vuex --save => 安装到**运行时依赖** => 项目上线之后依然使用的依赖 ,开发时依赖 => 开发调试时使用 ...
