首页  思维导图  详情

面经

2023-06-03 10:53:43   0  举报





仅支持查看

AI智能生成

项目结构记录

vue项目

作者其他创作

大纲/内容

目录结构

public

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

node_modules

包的集合

src

项目的源代码

包括内容

api目录

封装的请求接口的方法

assets

放置的是公共的静态资源

components

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

router

路由

utils

自己封装的js工具库

views

页面视图组件

App.vue

首页，根组件

main.js

项目的入口文件

dist

打包生成文件

.browserslistrc

css兼容-postcss

.editorconfig

编辑器配置

.eslintrc.js

eslint的规则配置文件

.gitignore

git忽略文件

.prettierrc

prettier插件的配置文件

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

babel.config.js

babel的配置文件

jsconfig.json

js编译配置项

package.json

依赖项管理

README.md

项目的说明文档

vue.config.js

vue-cli的配置文件

引入vant

自动按需导入

安装插件

npm i babel-plugin-import -D

调整babel.config.js配置文件

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

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

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

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

Vue.use(组件名)

一次性导入全部组件

入口文件中引入

import Vant from 'vant'

import "vant/lib/index.css"

Vue.use(Vant)

安装

npm i vant@latest-v2 -S

适配vw

安装插件

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

配置postcss.config.js文件

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

注意

配置完毕之后要重启

postcss.config.js文件中配置的视口宽度是375px, 也就是意味这设计图为375px时，才可以设计图中 量出多少，代码中写多少像素。 如果设计图是2倍图，那么量出的值应该除以2,得到的结果才是应该写在代码中的值。

项目开发步骤

1、配置一级路由

配置layout首页路由

{     path: '/',     component: Layout   },

配置detail详情页路由

{     path: '/detail/:id',     // 懒加载     component: () => import('@/views/article/detail.vue')   },

配置登录路由

{     path: '/login',     component: () => import('@/views/login/index.vue')   },

配置注册路由

{     path: '/register',     component: () => import('@/views/register/index.vue')   }

2、配置layout中的tabbar

引入和注册组件

import { Button, Tabbar, TabbarItem } from 'vant' Vue.use(Button) Vue.use(Tabbar) Vue.use(TabbarItem)

使用组件，在layout/index.vue

<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>

修改文字内容

修改图标

3、配置vant主题色

修改babel.config.js

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

修改vue.config.js,覆盖默认的颜色变量

覆盖原本的变量

4、配置二级路由

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

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

二级路由   

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

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

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

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

<van-form @submit="onSubmit">              <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="登录" />

6、封装axios代码

设置基地址

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

设置请求拦截器

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

设置响应拦截器

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

7、封装请求数据的函数

目的

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

复用

做法

1、创建了一个API文件夹

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

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

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

axios的返回值是一个promise

8、轻提示

说明