2024年Vue3项目搭建规范，2024年最新字节跳动内容审核面试问题及答案

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

npm run prettier

1.3 使用ESLint检测

1. VSCode安装ESLint插件：ESLint

2. 解决eslint和prettier冲突的问题

npm i eslint-plugin-prettier eslint-config-prettier -D

3. 添加prettier插件

extends: [

“plugin:vue/vue3-essential”,

“eslint:recommended”,

“@vue/typescript/recommended”,

“@vue/prettier”,

“@vue/prettier/@typescript-eslint”,

‘plugin:prettier/recommended’

],

二、项目搭建规范-第三方库集成

---

2.1 vue.config.js配置（修改vue-cli封装好的内部webpack）

node接受commonJS模板规范

const path require(‘path’)

module.exports = {

// 1. 配置方式一：CLI提供的属性

outputDir: ‘./build’,

publicPath: ‘./’, // 打包后文件是相对路径

// 2. 配置方式二：和Webpack属性完全一致，最后会进行合并

configureWebpack: {

resolve: {

alias: {

components: ‘@/components’

}

}

},

// configure是函数形式：直接覆盖原Webpack配置

configureWebpack: (config) => {

config.resolve.alias = {

“@”: path.resolve(__dirname, ‘src’),

components: ‘@/components’

}

},

// 3. 配置方式三：chainWebpack链式形式

chainWebpack: (config) => {

config.resolve.alias.set(‘@’, path.resolve(__dirname, ‘src’).set(‘components’, ‘@/components’))

}

}

2.2 vue-router集成

1. 安装vue-router最新版本

npm install vue-router@next

defineComponent：定义组件，更好的支持ts

2. 创建router对象

import { createRouter, createWebHashHistory } from ‘vue-router’;

import type { RouteRecordRaw } from ‘vue-router’; // 声明导入的是一个type，可不加

const routes: RouteRecordRaw[] = [

{

path: ‘/’,

redirect: ‘/login’

},

{

path: ‘/login’,

component: () => import(‘@/views/login/index.vue’)

},

{

path: ‘/main’,

component: () => import(‘@/views/main/index.vue’)

}

]

const router = createRouter({

routes,

history: createWebHashHistory()

})

export default router

2.3 element-plus集成

1. 全局引用：所有组件全部集成

优点：集成简单，方便使用

缺点：全部会打包

import ElementPlus from ‘element-plus’;

import ‘element-plus/theme-chalk/index.css’;

app.use(ElementPlus)

1. 按需引用

优点：包会小一些

缺点：引用麻烦

哈哈哈哈

import { ElButton } from ‘element-plus’

import ‘element-plus/theme-chalk/base.css’;

import ‘element-plus/theme-chalk/el-button.css’;

components: {

ElButton

}

以上方法太麻烦，可以添加babel-plugin-import工具进行按需引入，并进行配置

npm install babel-plugin-import -D

// babel.config.js

module.exports = {

plugins: [

[

‘import’,

{

libraryName: ‘element-plus’,

// 引入组件

customName: (name) => {

name = name.slice(3)

return element-plus/lib/components/${name}

},

// 引入样式

customStyleName: (name) => {

name = name.slice(3)

// 如果你需要引入 [name].scss 文件，你需要用下面这行

// return element-plus/lib/components/${name}/style

// 引入 [name].css

return element-plus/lib/components/${name}/style/css

}

}

]

],

presets: [‘@vue/cli-plugin-babel/preset’]

}

• main.ts入口文件存放主要逻辑

• 把共性的逻辑进行抽取

// main.ts

import { createApp, App } from ‘vue’

import { globalRegister } from ‘./global’

import rootApp from ‘./App.vue’

const app: App = createApp(rootApp)

/** app.use()有传入函数的两种方式

app.use(function(app: App) {

})

app.use({

install: function(app: App) {

}

})

*/

// 方式一：

globalRegister(app)

// 方式二：更优雅

app.use(globalRegister)

// global/index.ts

import { App } from ‘vue’

import registerElement from ‘./regiserElement’

export function globalRegister(app: App): void {

registerElement(app)

}

// global/registerELement

import { App } from ‘vue’

import ‘element-plus/theme-chalk/base.css’;

import { ElButton, ElForm } from ‘element-plus’

const components = [

ElButton,

ElForm

]

export default function (app: App): void {

for (const component of components) {

app.component(component.name, component)

}

}

三、其他文件

---

1. .browserslistrc - 帮助我们做浏览器适配

• 帮助我们做浏览器适配

• css查询文件

• babel：ES6 TS -> JS

1% // 市场份额大于百分之一的浏览器

last 2 versions // 适配主流浏览器的最新的两个版本

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：