Web前端最全Vite2(1)，2024腾讯前端面试题及答案

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

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

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()] })

在项目根目录运行

npm run dev

默认在本地3000端口启动服务。

所以使用浏览器访问 http://localhost:3000/ 就能看到如下的欢迎界面

集成Element

因为我们使用的Vue3.0,所以要使用Element-ui的话就必须要使用，Element Plus 这是一个使用vue3来编写的vue组件库，

官方地址

要集成到项目中也很简单

npm install element-plus --save

运行以上命令先安装element-plus

然后在入口文件main.js中引入相应的库

import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css'

然后将ElementPlus挂载到Vue的原型上,并将主题的大小设置为 small

createApp(App).use(ElementPlus,{size: 'small'}).mount('#app')

这样引用后就可以全局使用ElementPlus，稍微测试一下

找到HelloWorld.vue组件， 添加一行代码

<el-button type="primary">查询</el-button>

报错后，无需刷新，查看页面

生效了。集成ElementPlus IS DONE ！

集成vue-router

Vite脚手架生成的vue项目，目前是没有集成vue-router的，没关系，自己动手丰衣足食。说干就干

第一步

安装vue-router

这里注意一下，一点要安装vue-router的4.x版本，要不然无法和Vue3.x搭配使用。

npm install vue-router@4 --save

• 1

第二步

创建 /src/router/index.js

写入以下内容

import { createRouter, createWebHashHistory } from 'vue-router' const router = new createRouter({ history:createWebHashHistory(), routes:[ { path:'/', redirect:'/home' }, { path:'/home', component:() => import('../views/Home.vue') }, { path:'/user', component:() => import('../views/Users.vue') }, ] }) router.beforeEach((to,from,next) => { console.log(to,from,111); next(); }) export default router;

创建了router对象，是hash模式的路径，

主要配置了二个路径， 分别是

• /home 指向 /src/views/Homme.vue

• /user 指向 /src/views/User.vue

第三步

创建 views/Homme.vue和views/Homme.vue 二个组件。

创建路由后，要补充创建 views/Homme.vue和views/Homme.vue 二个组件。

内容分别是

<template> My Home Page </template>

<template> My Users Page </template>

第四步

修改 App.vue的内容

<template> <div id='nav'> <router-link class="link" to='/home'>Home</router-link> | <router-link class="link" to='/user'>User </router-link> </div> <div> <img alt="Vue logo" src="./assets/logo.png" /> </div> <router-view></router-view> </template>

第五步

在main.js中引入并挂载router

// ... import router from "./router"; createApp(App) .use(ElementPlus,{size: 'small'}) .use(router) .mount('#app') // ...

重新启动项目，访问 http://localhost:3000/

预览效果如下:

集成less

在vue中可以这样使用less

<style lang="less"> .page-name { color: red; span { color: blue; } } </style>

但直接使用会报错,如下图

需要在项目中安装less

npm i less --save

• 1

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

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

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。