Vue移动项目day01
一、项目初始化
目标
能使用 Vue CLI 创建项目
了解 Vant 组件库的导入方式
掌握制作使用字体图标的方式
掌握如何在 Vue 项目中处理 REM 适配
理解 axios 请求模块的封装
使用 Vue CLI 创建项目
如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：
npm install --global @vue/cli
在命令行中输入以下命令创建 Vue 项目：
vue create toutiao-m
Vue CLI v4.2.3
? Please pick a preset:
default (babel, eslint)
> Manually select features
default：默认勾选 babel、eslint，回车之后直接进入装包
manually：自定义勾选特性配置，选择完毕之后，才会进入装包
选择第 2 种：手动选择特性，支持更多自定义选项
? Please pick a preset: Manually select features
? Check the features needed for you ...
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 () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="less">< ...
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" route>
...
Vue移动项目day05
五、首页—频道编辑
处理页面弹出层Vant 中内置了 Popup 弹出层 组件。
1、在 data中添加一个数据用来控制弹层的显示和隐藏
data () {
return {
...
isChannelEditShow: true // 这里我们先设置为 true 就能看到弹窗的页面了
}
}
2、然后在首页模板中的频道列表后面添加弹出层组件
<!-- 频道编辑 -->
<van-popup
class="edit-channel-popup"
v-model="isEditChannelShow"
position="bottom"
:style="{ height: '100%' }"
closeable
close-icon-position="top-left"
>内容</van-popup>
<!-- /频道编辑 -->
.edit-channel-popup {
padding-top: 100px;
box-sizing: border-box;
}
测试查看结果。
创建 ...
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>
2、配置到根路由
{
path: '/user/:userId',
name: 'user',
component: () => import('@/views/user')
}
...
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: {}
}
</script>
<style scoped lang="less"></style>
2、然后将该页面配置到根级路由
{
pa ...
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、然后把搜索页面的路由配置到根组件路由（一级路由）
{
path: '/search',
omponent: Search
}
最后访问 /search 测试。
页面布局1、创建 src/views/se ...
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>
</template>
<script>
export default {
nam ...
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-cell title="昵称" value="abc" is-link />
<van-cell ti ...
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"
round
width="30"
height="30"
styl ...
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 => 安装到运行时依赖 => 项目上线之后依然使用的依赖 ,开发时依赖 => 开发调试时使用
开发时依赖 就是开开发的 ...
基础环境搭建
项目课设计
人力资源的环境搭建vue-element-admin的了解和介绍目标: 学习和了解通用的vue后台集成方案vue-element-admin
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
vue-element-admin 是一个后台集成方案, 集成了PC项目中很多的业务场景和功能, 尤其在当下SPA的趋势下,我们可以从中获得很多成熟的解决方案.
vue-element-admin 有一个成熟的集成方案，里面包含了所有的业务功能和场景,并不适合直接拿来进行二次开发, 但是可以通过该项目中的一个案例来进行学习和使用.
这里是官网地址
这里是线上demo地址
如果你想查看该项目的具体功能和效果，可以拉取代码，启动进行预览￥
$ git clone https://github.com/PanJiaChen/vue-element-admin.gi ...
