环境准备
-
前往这里下载 ：/download/
-
配置 环境变量；（建议百度）
-
使用
node -v验证 是否安装成功
npm 介绍：
nodejs包管理工具（node package mangager）:
-
npm 对前端主流技术进行统一管理
-
可以将 nodejs 想象成 Maven：
maven 管理 java 后端依赖 — 远程仓库(中心仓库) — 阿里云镜像；
npm 管理前端系统依赖 — 远程仓库(中心仓库) — 配置淘宝镜像；
配置淘宝镜像：
npm config set registry
查看 配置的远程仓库：
npm config get registry
配置 npm 依赖下载位置：（位置自定义）
npm config set cache “D:\CodeTool\nodereps\npm_cache”
npm config set prefix “D:\CodeTool\nodereps\npm_global”
验证 环境配置：
npm config ls
安装 Vue 脚手架
Vue CLI 官网：/zh/guide/
npm uninstall -g @vue/cli # 卸载版本脚手架
npm uninstall -g vue-cli # 卸载版本脚手架
安装 版本的 Vue CLI：
npm install -g @vue/cli
验证安装成功：（如果显示无法识别 “vue”，需要将 配置到环境变量）
vue --version
第一个 Vue 脚手架项目
================================================================================
Vue CLI 中项目开发方式：一切皆组件！
-
VueCLI 开发方式是在项目中开发一个一个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统。
-
日后在使用 Vue CLI 进行开发时不再书写html，编写的是一个个组件(.vue文件)，打包时 Vue CLI 会将组件编译成运行的 html 文件。
命令创建项目
（1）使用以下命令来创建一个新项目：
vue create hello-world
（2）我们选择 手动配置：用方向键 ↑ ↓ 操控选项，Enter 确定；
Please pick a preset: (Use arrow keys)
default (babel, eslint) # 默认配置
Manually select features # 手动配置
（3）选择配置，勾选如下即可：方向键 ↑ ↓ 操作，按空格选中，Enter 确定；
Vue CLI v4.4.6
Please pick a preset: Manually select features
Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
（4）首先检查刚才选择的配置；
然后问我们是否使用 history mode，其实就是页面路由含不含有 #；这里我们选择 Y
Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
y
（5）选择CSS预编译器，这里我们选择Less；
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
（6）选择 ESLint 代码校验规则，提供一个插件化的 javascript 代码检测工具，这里我们选择 ESLint + Prettier;
Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
（7）选择什么时候进行代码校验，Lint on save：保存就检查，
Lint and fix on commit：fix 或者 commit 的时候检查，这里我们选择第一个；
Pick additional lint features: (Press to select, to toggle all, to invert selection)
(*) Lint on save
( ) Lint and fix on commit
（8）选择把配置保存到哪个文件中，
In dedicated config files 存放到独立文件中，In 存放到 中，
这里我们选择放到 中；
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
In
（9）问我们是否保存刚才的配置，以后的文件可以直接使用，选择 N。
Save this as a preset for future projects? (y/N)
N
至此项目搭建完毕。
使用如下命令运行项目：
cd hello-world # 首先进入项目根路径
npm run serve # 运行项目
浏览器输入如下路径来访问项目：
http://localhost:8080
图形化界面创建项目
使用图形化界面创建和管理项目：
vue ui
vue-cli4 目录结构
-
node_modules：用于存放我们项目的各种依赖； -
public：用于存放静态资源（不会变动的）； -
public/：模板文件，作用是生成项目的入口文件。
浏览器访问项目的时候就会默认打开的是生成好的 。
-
src：是存放各种 .vue 文件的地方。 -
src/assets：用于存放着各种静态文件（可能会变动），比如图片。 -
src/components：存放公共组件（可复用），比如 、 等。 -
src/router/：vue-router 路由文件。
需要引入 src/views 文件夹下的 .vue，配置 path、name、component。
-
src/store/：是 vuex 的文件，主要用于项目里边的一些状态保存。
比如 state、mutations、actions、getters、modules。
-
src/views，存放页面组件（不可复用），比如 ，。 -
src/： 是项目的主组件；
中使用 router-link 引入其他模块，所有的页面都是在 下切换的。
-
src/：入口文件，主要作用是初始化 vue 实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量。 -
.gitignore：配置 git 上传想要忽略的文件格式。 -
：一个工具链，主要用于在当前和较旧的浏览器或环境中将 ES6 的代码转换向后兼容（低版本ES）。 -
：模块基本信息项目开发所需要的模块，版本，项目名称。 -
：是在 npm install 时候生成的一份文件，用于记录当前状态下实际安装的各个 npm package 的具体来源和版本号。
vue-cli 中使用 Axios
安装 axios：
npm install axios --save-dev
配置文件 中引入 axios：
import axios from ‘axios’;
.$http=axios;
使用 axios：·
this.$(“url”).then((res)=>{});
this.$(“url”).then((res)=>{});
Vue 脚手架项目打包
在项目根目录中执行如下命令：
npm run build
总结
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript
性能
linux
