首页  思维导图  详情

面经

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、轻提示

说明