2024年Vue CLI 脚手架，前端程序员面试笔试真题库

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

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

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

2.安装脚手架

(1)卸载脚手架

npm uninstall -g @vue/cli //卸载3.x版本脚手架

npm uninstall -g vue-cli //卸载2.x版本脚手架

(2)Vue Cli官方网站

https://cli.vuejs.org/zh/guide/

(3)安装vue Cli

npm install -g vue-cli

• 输入 vue init

(2)配置nodejs本地仓库环境变量

path=…;D:\noderepository\npm_global

目的：便于后续使用vue cli相关命令

(3)测试命令能否执行

窗口中输入命令 ：vue init

显示如上界面即可

3.第一个vue脚手架项目

(1) 创建vue脚手架第一个项目

• vue init webpack 项目名

(2)创建第一个项目

• 下载失败提示

• 下载成功后

hello ------------->项目名

-build ------------->用来使用webpack打包使用build依赖 构建一些依赖文件

-config ------------->用来做整个项目配置目录 主要用来对 开发 测试 环境进行配置

-node_modules ------>用来管理项目中使用依赖

-src ------>用来书写vue的源代码[重点]

+assets ------>用来存放静态资源 [重点]

components ------>用来书写Vue组件 [重点]

router ------>用来配置项目中路由[重点]

App.vue ------>项目中根组件[重点]

main.js ------>项目中主入口[重点]

-static ------>其它静态

-.babelrc ------> 将es6语法转为es5运行

-.editorconfig ------> 项目编辑配置

-.gitignore ------> git版本控制忽略文件

-.postcssrc.js ------> 源码相关js

-index.html ------> 项目主页

-package.json ------> 类似与pom.xml 依赖管理 jquery 不建议手动修改

-package-lock.json ----> 对package.json加锁

-README.md ----> 项目说明文件

• 下载成功后

• 文件显示

(3)如何运行在项目的根目录中执行

a、 切换到创建项目的根目录

b、 在项目根目录中执行命令 npm run dev

(4)如何访问项目

• http://localhost:8080

(5)项目的包结构

• 传文件时这两个文件可以删除./当前目录

(5)Vue Cli中项目开发方式

• 注意: 一切皆组件 一个组件中 js代码 html代码 css样式

1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统

2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件

4.如何开发Vue脚手架

注意:在Vue cli 中一切皆组件

5、案例

• components中（组件中）

{{msg}}

这是我女朋友杨福君！

• router路由

import Vue from ‘vue’

import Router from ‘vue-router’

import user from ‘@/components/user’

Vue.use(Router)

export default new Router({

routes: [

{

path: ‘/user’,

name: ‘User’,

component: user

}

]

})

• app.vue组件

展示用户信息

• main.js

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

Vue.config.productionTip = false

new Vue({

el: ‘#app’,

router,

components: { App },

template: ‘’

})

总结

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

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

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

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

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

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

第三阶段:前端常用框架

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

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