面经移动端
项目开发流程
# 主要技术栈
- Vue2
- Vue Router
- vant 组件库
# 项目初始化
- 使用 vue-cli 搭建项目基础结构
- 安装 eslint 插件并在 `.vscode/settings.json` 中配置保存时自动纠错，确保代码风格统一
- 安装 vant2.x 第三方组件库，根据官方文档进行配置引入
- 按需导入Vant（babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式）
# 路由配置
- 注册页、登录页、首页、详情页为一级路由，路由出口在 `App.vue` 中
- 面经列表页、收藏页、喜欢页、用户页为首页下的二级路由，路由出口在 `Layout.vue` 中
- 注意二级路由的配置属性是 children，不是 childrens
# axios配置
- 封装 request 请求模块，创建 axios 实例（baseURL、timeout）
- axios 拦截器配置（统一添加请求头，数据剥离，统一处理 token 失效）
- 项目中发送的请求地址可能来自多个服务器，对应多个 axios 实例
- 抽取请求函数，封装在单个js模块中，从页面上分离，统一管理
# 底部导航栏
- Tabbar组件
- 修改图标（直接通过 icon 属性设置）
- 修改主题色（官方文档主题定制页）
- 使用路由模式，匹配页面路径和组件（添加 route 属性和 to 属性）
# 登录页/注册页
- NavBar组件、Form组件、Toast组件
- 修改按钮圆角
- 表单校验（表单数据收集，校验规则和指定字段）
- 登录功能（表单整体校验、将响应回来的token存入本地缓存和vuex）
# 文章列表页
- Cell组件、List组件
- 利用插槽自定义Cell组件内部结构
- onLoad 触底事件，分页请求和加载数据
- 切换推荐和最新，重置数据，重新请求
- 点击跳转文章详情，使用动态路由传递参数id
# 文章详情页
- 接收参数id，动态渲染页面
- 点赞收藏功能（调用接口切换点赞或取消，同时动态类名控制样式）
# 我的页面
- Grid组件, GridItem组件
# 打包
- 项目运行时代码放在内存中，可以实时修改
- 上线前，先构建，
- 利用路由懒加载提升首屏加载速度（）
项目总结
# sass(scss) less
## 变量声明方式
- sass $变量
- less @变量
## 选择器嵌套语法
- sass 缩进
- less 花括号
# 样式穿透（让父组件中定义的样式可以作用于子组件）
- scss `::v-deep 选择器`
- less `/deep/ 选择器`
# 使用三方包的一般步骤
- 安装、配置、导入、使用
- 注意修改配置文件，需要重启项目
# 判断包属于生产环境依赖还是开发环境依赖
- 看包上线后是否仍需要使用
- 需要 --> 生产环境（默认，npm i -S）
- 不需要 --> 开发环境（npm i -D）
# 组件引入说明
- Vue.use(Button) # 相当于 Vue.component(Button.name,Button)
- const app = new Vue({router}) # 相当于 app.$router
# Vue2 vs Vue3
## Vue2
- vuex 3.x
- vueRouter 3.x
- vant 2.x
- element-ui
## Vue3
- vuex 4.x
- vueRouter 4.x
- vant 3.x/4.x
项目补充
eslint 自动纠错
安装 eslint 插件后，进行相关配置：
// .vscode/setting.json
{
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.formatOnSave": false
}
路由懒加载
路由懒加载 可以提升 SPA 首屏渲染性能，要实现路由懒加载，只需要改变组件的引入方式:
静态引入组件时，项目打包后的效果：
如果是路由懒加载，项目打包后的效果：
Vuex全局状态管理
什么是Vuex
Vuex 是 Vue 官方的状态管理插件，用来管理项目的 全局状态（数据）
使用 Vuex 的好处：
- 数据集中管理
- 响应式更新
- 操作简单（提供了一些辅助函数）
Vuex核心
modules
一个
store仓库可以拆分为若干模块，每个模块有独立的state、getters、mutations、actions
拆分模块
// src/store/modules/user.js
export default {
// 开启命名空间【必需】
namespaced: true,
// 全局状态（数据）
state () {
return {
}
},
// 全局计算属性
getters: {
},
// 全局状态的修改方法
mutations: {
},
// 全局状态相关的异步操作
actions: {
}
}
注册模块
// src/store/index.js
import user from './modules/user'
export default new Vuex.Store({
// 注册模块
modules: {
user
}
})
state
用来存放全局状态（数据）
mapstate将store中的数据自动映射到组件的计算属性中结果是一个对象，里面是所有被转换的计算属性，通常使用
...展开后放入computed选项中
定义
state() {
return {
全局状态名：全局状态值
}
}
使用
// 方式一：js原生方式
this.$store.state.模块名.全局状态名
// 方式二：辅助函数配合计算属性
import { mapState } from 'vuex'
computed: {
...mapState('模块名',['全局状态名'])
}
created() {
this.全局状态名
}
getters
用来存放全局计算属性，依赖于
state中的数据，最终得到一个结果
定义
getters: {
全局计算属性名(state) {
return 全局计算属性值
}
}
使用
// 方式一：js原生方式
this.$store.getters['模块名/全局计算属性名']
// 方式二：辅助函数配合计算属性
import { mapGetters } from 'vuex'
computed: {
...mapGetters('模块名',['全局计算属性名'])
}
created() {
this.全局计算属性名
}
mutations
用来定义一些修改
state中全局状态的方法
定义
mutations: {
方法名(state,obj) {
// 修改全局状态
}
}
使用
// 方式一：js原生方式
this.$store.commit('模块名/方法名',obj)
// 方式二：辅助函数配合计算属性methods
import { mapMutations } from 'vuex'
methods: {
...mapMutations('模块名',['方法名']),
handleUpdate() {
this.方法名(obj)
}
}
actions
用来管理一些和全局状态有关的异步操作，如请求后对全局状态重新赋值
定义
actions: {
方法名(ctx,obj) {
// 异步操作：请求、定时器
// 调用 mutations 中的修改方法 ctx.commit()
}
}
使用
// 方式一：js原生方式
this.$store.dispatch('模块名/方法名',obj)
// 方式二：辅助函数配合计算属性methods
import { mapActions } from 'vuex'
methods: {
...mapActions('模块名',['方法名']),
handleUpdate() {
this.方法名(obj)
}
}
