2024年前端最全webpack4+vue3，腾讯、字节跳动面经已发

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

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

• • 2.1 创建命令
    • 2.2 Please pick preset(选择预定配置）
    • 2.3 Check the features needed for your project (选择你项目需要添加的功能)
    • 2.4 Choose a version of Vue.js that you want to start the project with (选择项目使用的vue版本)
    • 2.5 Use history mode for router? (路由是否使用 history模式)
    • 2.6 Pick a CSS pre-processor ： (选择一个CSS预处理器)
    • 2.7 Pick a linter / formatter config (选择一个格式化配置)
    • 2.8 Pick additional lint features (选择代码格式检查时机)
    • 2.9 Where do you prefer placing config for Babel, ESLint, etc.?
    • 2.10 Save this as a preset for future projects? (是否保存这个预配置作为未来项目的模板)
    • 2.11 开始执行创建项目
• 3 加入依赖
• • 3.1加入 axios
    • 3.2 加入element-plus
• 4 添加配置文件
• • 4.1 新增vue.config.js
    • 4.2 新增全局的配置文件【config/index.js】
    • 4.3 新增存储用户信息的工具类【在utils文件夹下，新增cookie.js、localStorage.js】
    • • 4.3.1 localStorage.js
    • 4.3.2 cookie.js
    • 4.4 在main.js中全局引入 element-plus组件
    • 4.5 修改.eslintrc.js：增加配置

1 安装vue vue-cli

安装vue：

npm install vue

安装vue-cli：

npm install -g @vue/cli

2 创建步骤

创建过程图

2.1 创建命令

vue create blog-web

2.2 Please pick preset(选择预定配置）

Manually select features【选择手动配置】

2.3 Check the features needed for your project (选择你项目需要添加的功能)

1. Choose Vue Version
2. Babel
3. Router
4. Vuex
5. CSS Pre-processors
6. Linter / Formatter

2.4 Choose a version of Vue.js that you want to start the project with (选择项目使用的vue版本)

选择 3.x(Preview)

2.5 Use history mode for router? (路由是否使用 history模式)

输入n（拒绝）

2.6 Pick a CSS pre-processor ： (选择一个CSS预处理器)

选择Less

2.7 Pick a linter / formatter config (选择一个格式化配置)

选择：ESLint + Standard config

2.8 Pick additional lint features (选择代码格式检查时机)

选择： Lint on save 【代码保存时】

2.9 Where do you prefer placing config for Babel, ESLint, etc.?

选择：In dedicated config files

2.10 Save this as a preset for future projects? (是否保存这个预配置作为未来项目的模板)

输入：n

2.11 开始执行创建项目

3 加入依赖

3.1加入 axios

npm install axios --save

3.2 加入element-plus

npm install element-plus --save

注意：vueCli4创建项目安装element-plus，浏览器报错Uncaught TypeError: Cannot read property ‘prototype‘ of undefined：原因及解决方法
附：不能集成IView，原因和element-plus一样会报错，IView现有的版本暂不支持vue-cli@4创建的Vue3版本的项目。所以element-plus能支持真实万幸，哈哈哈。

4 添加配置文件

4.1 新增vue.config.js

const path = require('path')

const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: './',
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: true,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('\_c', resolve('src/components'))
  },
  productionSourceMap: false,

  devServer: {
    port: 9080,
    open: true,
    proxy: {
      '/blog-api': {
        target: 'http://localhost:9000/',
        // ws: true,
        changeOrigin: true,
        pathRewrite: { // 将 blog-api 替换为空，即去掉 blog-api，例如：http://localhost:8080/blog-api/demo替换后为http://localhost:8080/demo
          '^/blog-api': ''
        }
      }
      // '/foo': {
      // target: '<other\_url>'
      // }
    }
  }
}

4.2 新增全局的配置文件【config/index.js】

export default {
  // 配置显示在浏览器标签的title
  projectTitle: '个人博客',
  cookieExpires: 365 \* 24 \* 60 \* 60 \* 1000, // 设置 365天
  // api请求基础路径
  baseUrl: {
    dev: ' http://localhost:9080',
    // pro：即线上的IP地址和端口，需要和nginx监听的地址、端口保持一致
    pro: 'http://localhost:8999'
  },
  // 默认打开的首页的路由name值，默认为home
  homeName: 'Home',
  // 需要加载的插件
  plugin: {
    'error-store': {
      showInHeader: true, // 设为false后不会在顶部显示错误日志徽标
      developmentOff: true // 设为true后在开发环境不会收集错误信息，方便开发中排查错误
    }
  },
  prefixUrl: '/blog-api/'
}

4.3 新增存储用户信息的工具类【在utils文件夹下，新增cookie.js、localStorage.js】

4.3.1 localStorage.js

/\*\*
 \* localStorage 的封装工具类
 \* @param params
 \*/
import config from '@/config'
const { cookieExpires } = config
// 设置缓存
export const setItem = (name, value) => {
  const obj = {
    name: name,
    value: value,
    expires: cookieExpires || false, // 如果没有设置过期时间，则设置成false
    startTime: new Date().getTime() // 记录何时将值存入缓存，毫秒级
  }
  if (obj.expires) { // 如果设置了过期时间，则以 obj.name 为 key，obj 为值放进去
    localStorage.setItem(obj.name, JSON.stringify(obj))
  } else {
    // 如果 obj.expires 没有设置，就判断一下value的类型


### 文末
篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

![](https://img-blog.csdnimg.cn/img_convert/04273c2f50e58b6822663c5b2f379206.png)  

![](https://img-blog.csdnimg.cn/img_convert/081b5236ebd9ff24af676bcd4a51c99e.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**