2024年前端最新Vue7-Vue CLI(1)，web前端面试题汇总

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

1. 基于 Vue.js 进行快速开发的完整系统

2. 脚手架：快速搭建项目结构

3. 安装$ npm install -g @vue/cli

OR

=====================================================================

1. 安装：$ yarn global add @vue/cli

2. 安装完毕后，可以在 cmd 命令行中输入：$ vue --version如果能够查看到版本信息，则说明安装成功，否则安装失败或环境变量配置有问题

3. 创建项目

• GUI - 图形化用户界面$ vue ui

• 命令行执行创建命令：$ vue create project-name

4. 命令行显示创建项目的向导

• 选择手动选择项目新特性项：

? Please pick a preset:

Default ([Vue 3] babel, eslint)

Default ([Vue 2] babel, eslint)

> Manually select features

• 选择新特性：

? Check the features needed for your project: (Press to select, to toggle all, to invert selection, and

to proceed)

(_) Babel

( ) TypeScript

( ) Progressive Web App (PWA) Support

( ) Router

( ) Vuex

>(_) CSS Pre-processors

(*) Linter / Formatter

( ) Unit Testing

( ) E2E Testing

• 选择 vue 版本：

? Choose a version of Vue.js that you want to start the project with

3.x

> 2.x

• 选择 CSS 预处理器：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

Sass/SCSS (with dart-sass)

> Less

Stylus

• 选择 linter 规范：

? Pick a linter / formatter config:

ESLint with error prevention only

ESLint + Airbnb config

> ESLint + Standard config

ESLint + Prettier

• 选择保存时验证并格式化：

? Pick additional lint features: (Press to select, to toggle all, to invert selection, and to pr

oceed)

>(*) Lint on save

( ) Lint and fix on commit

• 选择配置文件存放位置：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

> In dedicated config files

In package.json

• 是否将上述选择特性保存为预设项：

? Save this as a preset for future projects? (y/N)

如果是 yes，则还需要输入预设项名称

安装项目依赖

=========================================================================

1. 项目创建成功后，进入项目目录，运行任务：

$ cd project-name

$ npm run serve # 或 yarn serve

2. 项目说明

• public 目录中放置的是应用的 html 文件（通常只有一个 index.html）

• src 目录中放置我们自己项目中所书写的源代码

• src 下 main.js 是应用的入口 JS 文件

• .eslintrc.js 是 ESLint 的配置文件

• babel.config.js 是 Babel 的配置文件

• package.json 是项目配置文件

• vue.config.js 是 Vue CLI 的配置文件（在 VueCLI4.x 中这个文件需要自己手动创建）

• npm scripts

{

“scripts”: {

“start”: “npm run serve”,

“serve”: “vue-cli-service serve”,

“build”: “vue-cli-service build”,

“lint”: “vue-cli-service lint”

},

结束

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

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