JavaScript 和 ES6
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
开源分享：docs.qq.com/doc/DSmRnRG… 3.2 引入 ElementUI 组件库
1.0 环境准备
Vue - cil 是vue 官方提供的一个脚手架，用于快速生成一个 Vue 的项目。
Vue - cli 依赖环境为：NodeJs
1.1 安装 NodeJs
1.2 验证 NodeJs 环境变量
NodeJs 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过：node -v
Microsoft Windows [版本 10.0.22631.3296] (c) Microsoft Corporation。保留所有权利。 C:\Windows\System32>node -v v20.11.1 C:\Windows\System32>出现了相对应的版本就配置成功了。
1.3 配置 npm 的全局安装路径
使用管理员身份运行命令行，在命令行中，执行如下指令：
npm config set prefix "注意：这里填写的是你自己的 NodeJs 的安装目录"
比如说:
npm config set prefix "E:\develop\NodeJs"
1.4 切换 npm 的淘宝镜像( npm 使用国内淘宝镜像的方法(最新) )
使用管理员身份运行命名行，在命令行中，执行如下指令：
//旧 npm config set registry https://registry.npm.taobao.org/ //新 npm config set registry https://registry.npmmirror.com选择最新的指令即可，因为旧的已经过期了，无法使用了。
1.5 查看镜像是否配置成功
使用管理员身份运行命令，在命令行中，执行如下指令：
C:\Windows\System32>npm config get registry https://registry.npmmirror.com C:\Windows\System32>这样就大致配置成功了。
1.6 安装 Vue - cli
使用管理员身份运行命令行，在命令中，执行如下指令：
npm install -g @vue/cli这个过程中，会联网下载，可能会耗时几分钟，耐心等待。
就像这样就代表 Vue - cli 配置成功了。
1.7 查看 Vue - cli 是否配置成功
用管理员身份来执行以下指令：
C:\Windows\System32>vue --version @vue/cli 5.0.8 C:\Windows\System32>出现对应的版本就代表安装成功了。
2.0 Vue 项目
2.1 Vue 项目的创建
用图像化界面创建项目，在 cmd 中运行以下代码：
回车之后会下面的界面：
将 Git 按键设置为：无
选择手动配置项目：
额外再多选一个Router 功能
选择 vue 的版本和语法监测规范：
最后：
可以看到创建的新的文件夹，即为成功创建了 Vue 项目了。
接着用 VS 打开这个文件：
2.2 Vue 项目的结构
基于 Vue 脚手架创建出来的工程，有标准的目录结构。如下：
2.3 Vue 项目的启动
方式一：图形化界面启动
直接按下三角符号即可。
运行结果：
方式二：命令行
在当前创建好 vue 项目的目录上运行以下指令：
npm run serve
3.0 Element 概述
Element 是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
组成：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。
官网：组件 | Element
3.1 安装 ElementUI 组件库(在当前工程的目录下)并命令执行指令
npm install --legacy-peer-deps element-ui --sava
3.2 引入 ElementUI 组件库
main.js 中引入组件库
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);完整的 main.js 文件：
3.3 访问 Element 官网、复制组件库代码并调整
首先，在 views 中创建一个 .vue 文件。主要有三大部分：template、script、style
//简单认为，这里是 HTML 网页展示出来画面
<template>
<div>
</div>
</template>
//创建了 vue 核心对象，存放着数据、方法
<script>
export default {
}
</script>
//这里存放 css 样式代码
<style>
</style>
3.4 Element 实践
先找 Element 中找到自己喜欢的组件，比如说：按钮组件
接着找到之后，将起代码复制，粘贴到 template 标签中：
再接着，在 App.vue 中引用当前的 .vue 文件：
最后启动，运行结果如下：
4.0 Vue 路由
Vue Router 是 Vue 的官方路由。
组成：
1）VueRouter：路由器类，根据路由请求在视图中动态渲染选中的组件。
2）：请求链接组件，浏览器会解析成超链接 。
3）：动态视图组件，用来渲染展示与路由器对应的组件。
举个例子：
4.1 配置 VueRouter
接着配置两个文件的路径、名字等信息：
4.2 在每个文件中配置请求链接组件
：请求链接组件
第一个文件：
第二个文件：
4.3 配置 App.vue 文件
将其设置为
补充：在启动运行的时候，很有可能会报错以下的错误：
解决方案：
第一步：选择 vue.config,js 文件
最后
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
《前端开发四大模块核心知识笔记》
最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
