Web前端最全Vite2，2024年最新Web前端面试基础技能罗列

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

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

然后将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

安装完成就不报错了。

代理配置

在 vite.config.js中配置

将请求地址以 /api开头的地址映射到 http://jsonplaceholder.typicode.com/, 并移除 /api

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { proxy: { '/api': { target: 'http://jsonplaceholder.typicode.com/', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, })

集成axios

在vue中如果我们要与后端交互，就要使用http相关的库，如axios

下面是封装集成axiso到vite项目中

第一步

安装axios

npm i axios --save

创建 src/util/http.js, 内容如下

import axios from "axios"; var service = axios.create({ // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 5000, // request timeout responseType: "json", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: "Bearer eyJrIjoiZ1BkdjFuVWhpVFJYVDFnNlI4aWVkNjloM3hGSDRUbXkiLCJuIjoidGVzdCIsImlkIjoxfQ==" } }); // 添加请求拦截器 service.interceptors.request.use( function(config) { // 在发送请求之前做些什么 return config; }, function(error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 service.interceptors.response.use( function(response) { // 对响应数据做点什么 return response; }, function(error) { // 对响应错误做点什么 return Promise.reject(error); } ); export default service;

第二步

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）