面经

api目录

assets

components

router

utils

views

App.vue

main.js

npm i babel-plugin-import -D

module.exports&nbsp;=&nbsp;{<br>&nbsp;&nbsp;plugins:&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;['import',&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;libraryName:&nbsp;'vant',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;libraryDirectory:&nbsp;'es',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style:&nbsp;true<br>&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;'vant']<br>&nbsp;&nbsp;]<br>};

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

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

注册

import Vant from 'vant'

import "vant/lib/index.css"

Vue.use(Vant)

{<br>&nbsp;&nbsp;&nbsp;&nbsp;path:&nbsp;'/',<br>&nbsp;&nbsp;&nbsp;&nbsp;component:&nbsp;Layout<br>&nbsp;&nbsp;},

{<br>&nbsp;&nbsp;&nbsp;&nbsp;path:&nbsp;'/detail/:id',<br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;懒加载<br>&nbsp;&nbsp;&nbsp;&nbsp;component:&nbsp;()&nbsp;=&gt;&nbsp;import('@/views/article/detail.vue')<br>&nbsp;&nbsp;},<br>

{<br>&nbsp;&nbsp;&nbsp;&nbsp;path:&nbsp;'/login',<br>&nbsp;&nbsp;&nbsp;&nbsp;component:&nbsp;()&nbsp;=&gt;&nbsp;import('@/views/login/index.vue')<br>&nbsp;&nbsp;},

{<br>&nbsp;&nbsp;&nbsp;&nbsp;path:&nbsp;'/register',<br>&nbsp;&nbsp;&nbsp;&nbsp;component:&nbsp;()&nbsp;=&gt;&nbsp;import('@/views/register/index.vue')<br>&nbsp;&nbsp;}

import&nbsp;{&nbsp;Button,&nbsp;Tabbar,&nbsp;TabbarItem&nbsp;}&nbsp;from&nbsp;'vant'<br><br>Vue.use(Button)<br>Vue.use(Tabbar)<br>Vue.use(TabbarItem)

&lt;van-tabbar&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;van-tabbar-item&nbsp;icon="smile-o"&gt;面经&lt;/van-tabbar-item&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;van-tabbar-item&nbsp;icon="thumb-circle-o"&gt;收藏&lt;/van-tabbar-item&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;van-tabbar-item&nbsp;icon="hot-o"&gt;喜欢&lt;/van-tabbar-item&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;van-tabbar-item&nbsp;icon="user-circle-o"&gt;我的&lt;/van-tabbar-item&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/van-tabbar&gt;

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

覆盖原本的变量

二级路由&nbsp; &nbsp;

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

&lt;van-nav-bar&nbsp;title="登录"&nbsp;/&gt;

const&nbsp;instance&nbsp;=&nbsp;axios.create({<br>&nbsp;&nbsp;baseURL:&nbsp;'http://interview-api-t.itheima.net/h5/',<br>&nbsp;&nbsp;timeout:&nbsp;5000<br>})

instance.interceptors.request.use(<br>&nbsp;&nbsp;function&nbsp;(config)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;在发送请求之前做些什么<br>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;config<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;function&nbsp;(error)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;对请求错误做些什么<br>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;Promise.reject(error)<br>&nbsp;&nbsp;}<br>)

instance.interceptors.response.use(<br>&nbsp;&nbsp;function&nbsp;(response)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;response.data<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;function&nbsp;(error)&nbsp;{&nbsp;//&nbsp;3xx&nbsp;4xx&nbsp;5xx<br>&nbsp;&nbsp;&nbsp;&nbsp;Toast.fail(error.response.data.message)<br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Promise.resolve()&nbsp;创建一个成功状态的Promise对象<br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;Promise.reject()&nbsp;创建一个失败状态的promise对象<br>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;Promise.reject(error)<br>&nbsp;&nbsp;}<br>)

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

复用

1、创建了一个API文件夹

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

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

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

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

1、引入

2、在sfc单文件组件中

3、在非vue文件中

export&nbsp;const&nbsp;getToken&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{<br>&nbsp;&nbsp;return&nbsp;localStorage.getItem(KEY)<br>}

export&nbsp;const&nbsp;setToken&nbsp;=&nbsp;(token)&nbsp;=&gt;&nbsp;{<br>&nbsp;&nbsp;localStorage.setItem(KEY,&nbsp;token)<br>}

export&nbsp;const&nbsp;removeToken&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{<br>&nbsp;&nbsp;localStorage.removeItem(KEY)<br>}