面经

模板目录，里面放的index.html

public

包的集合

node_modules

项目的源代码

封装的请求接口的方法

api目录

放置的是公共的静态资源

assets

全局通用性的“功能”组件

components

路由

router

自己封装的js工具库

utils

页面视图组件

views

首页，根组件

App.vue

项目的入口文件

main.js

包括内容

src

打包生成文件

dist

css兼容-postcss

.browserslistrc

编辑器配置

.editorconfig

eslint的规则配置文件

.eslintrc.js

git忽略文件

.gitignore

prettier插件的配置文件

这个配置文件跟项目没关系，直接作用于编辑器的插件

.prettierrc

babel的配置文件

babel.config.js

js编译配置项

jsconfig.json

依赖项管理

package.json

项目的说明文档

README.md

vue-cli的配置文件

vue.config.js

目录结构

npm i babel-plugin-import -D

安装插件

plugins设置应该在babel.config.js原有内容之后继续添加，而不是删除覆盖掉原有内容

调整babel.config.js配置文件

import { 使用的组件名 } from ''vant'

Vue.use(组件名)

注册

在main.js中从vant里面按需引入

自动按需导入

import Vant from 'vant'

import \"vant/lib/index.css\"

Vue.use(Vant)

入口文件中引入

一次性导入全部组件

npm i vant@latest-v2 -S

安装

引入vant

npm i postcss-px-to-viewport@1.1.1 -D

module.exports = {  plugins: {    'postcss-px-to-viewport': {      viewportWidth: 375    }  }}

配置postcss.config.js文件

配置完毕之后要重启

注意

适配vw

配置layout首页路由

配置detail详情页路由

配置登录路由

配置注册路由

1、配置一级路由

引入和注册组件

<van-tabbar>      <van-tabbar-item icon=\"smile-o\">面经</van-tabbar-item>      <van-tabbar-item icon=\"thumb-circle-o\">收藏</van-tabbar-item>      <van-tabbar-item icon=\"hot-o\">喜欢</van-tabbar-item>      <van-tabbar-item icon=\"user-circle-o\">我的</van-tabbar-item>    </van-tabbar>

使用组件，在layout/index.vue

修改文字内容

修改图标

2、配置layout中的tabbar

具体配置项，可以访问文档：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/theme

修改babel.config.js

覆盖原本的变量

3、配置vant主题色

创建好需要的页面视图组件在views里

二级路由   

在根路由的下面使用children属性来设置二级路由

设置路由出口，在二级路由的父路由对应的组件身上设置路由出口

给vant 中 tabbar组件设置to属性和route属性

4、配置二级路由

<van-form @submit=\"onSubmit\">      <!--        van-field中的name值能够决定onSubmit函数中接收的对象参数的key       -->      <van-field v-model=\"username\" name=\"username\" label=\"用户名\" placeholder=\"用户名\" :rules=\"userRules\" />      <van-field v-model=\"password\" type=\"password\" name=\"password\" label=\"密码\" placeholder=\"密码\" :rules=\"passwordRules\" />      <div style=\"margin: 16px\">        <van-button block type=\"info\" native-type=\"submit\">提交</van-button>      </div>    </van-form>

<van-nav-bar title=\"登录\" />

登录注册静态页核心表单代码

5、搭建登录页和注册页静态结构

设置基地址

外框

设置请求拦截器

设置响应拦截器

6、封装axios代码

为了减少数据请求的代码在视图页面中占据大量空间

复用

目的

1、创建了一个API文件夹

2、根据不同的业务，创建不同的js文件

3、在js文件中引入封装好的axios，封装请求数据的函数

axios的返回值是一个promise

4、请求的结果/axios的结果一定要返回

做法

7、封装请求数据的函数

轻提示是vant提供的一个组件，作用是页面中提示框

说明

import { Toast } from 'vant'

Vue.use(Toast)

1、引入

this.$toast.success() this.$toast.fail()this.$toast.loading()

2、在sfc单文件组件中

不需要注册

3、在非vue文件中

使用

8、轻提示

1、请求和响应都是正常的，状态码都是200，但是业务逻辑错了，比如登录的时候密码错误

2、请求错误或者响应错误，具体的体现就是状态码不等于2xx

9、项目中错误的分类

export const getToken = () => {  return localStorage.getItem(KEY)}

getToken

setToken

export const removeToken = () => {  localStorage.removeItem(KEY)}

removeToken

10、封装本地数据存储的方法

项目开发步骤

面经