刷面试题
刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。
-
前端字节跳动真题解析
-
【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。 开源分享：docs.qq.com/doc/DSmRnRG…
1、创建项目文件夹 vue-cli 2
2、在文件夹内打开 cmd 窗口，输入命令：
vue init webpack learn
此时已经开始下载模板。
根据提示信息，输入对应的信息内容，如图：
vue 项目打包的时候，Runtime+compiler 与 Runtime-only 是有区别的，第一个解释，该命令适用大多数用户，所以我们先选择第一个，后边讲解区别。
回车继续创建项目：
提示是否使用 vue-router（路由）、Eslint（代码规范化检测工具），最后提示我们选择使用什么命令进行项目管理，最后一个是手动处理，我们选择大家熟悉的 npm 就好了。
现在等着项目创建完成之后，会提示我们进入项目，然后使用命令运行环境。
三、Vue-cli 2.x 项目结构解析
首先从 配置文件 webpack.json 文件入手：寻找 scripts ，scripts 中存放的都是一些项目运行、打包、测试等脚本。代码如下：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
3.1、为什么使用 npm run dev 启动服务？
webpack-dev-server 是启动一个webpack本地服务。
--inline 运行本地命令
--progress 进度
--config build/webpack.dev.conf.js 配置执行脚本入口文件
所以我们执行 npm run dev 的时候，其实执行的是：
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
启动一个本地服务。启动服务的时候，展示项目进度。如果把 --progress 去掉之后，启动服务的时候就不会显示进度了。
3.2、项目运行后，为啥端口号是8080
找到 config 文件夹内的 index.js 文件，查找 dev中的配置项，就是专门为 npm run dev 执行时的配置项。
dev: {
//编译输出的二级目录
assetsSubDirectory: 'static',
//编译发布的根目录，可配置为资源服务器或cdn域名
assetsPublicPath: '/',
//使用 proxyTable代理的接口
proxyTable: {},
// 开发时候的访问域名，可通过环境变量自己设置
host: 'localhost',
//开发时候的端口号，如果被占用会随机分配
port: 8080,
//浏览器是否自动打开项目
autoOpenBrowser: false,
//是否使用eslint loader检查代码
useEslint: true,
//在浏览器展示错误蒙层
errorOverlay: true,
// 是否展示错误
notifyOnErrors: true,
poll: false, // webpack.js.org/configurati…
devtool: 'cheap-module-eval-source-map',
cacheBusting: true,
cssSourceMap: true
}
3.3、为何使用 npm run build 能够自动打包项目？
npm run build 运行时，其实执行的是： "node build/build.js"。
我们之前开发的网页，执行 js 文件的时候，必须引入 某个 html 文件内，浏览器访问 html 文件，渲染的时候才会执行js文件。
在node中：node 为 js 执行提供了环境，node 是 C++ 开发的 V8引擎，可以直接把 js 文件运行成二进制代码，所以运行起来很快。node 中执行 js 的时候，直接使用：node xx.js 文件就可以运行了。
所以打包项目的时候，执行的是 build 文件夹内的 build.js 文件。
四、项目其他文件介绍
整体的项目目录结构很简单，如图所示：
-
build - 存放执行脚本入口
-
config - 文件夹内的 index.js ，更多的dev、build配置
-
node_moudles - 存放依赖包资源
-
src - 存放开发资源
-
static - 存放静态资源
-
.babelrc - 对 ES6转ES5的限制
-
editorconfig - 编辑器配置
-
.gitignore - 提交 git 时忽略内容
-
index.html - 单页面应用的主入口
-
package-lock.json - 记录依赖包的真实版本
-
README.md - 使用文档
五、Runtime+compiler 与 Runtime-only 区别
我们再新建一个 runtime-only 的项目，发现两个项目只有 main.js 中有区别。两个 main.js 对比如下图：
要问 template 与 render 的区别，这就需要了解 vue 程序的运行过程：
-
template 经过解析(parse) 成 语法抽象树(abstract system tree)
-
再通过 render 函数进行渲染操作虚拟 DOM (Virtual dom)
-
然后虚拟 DOM 操作全部完成之后生成真实 DOM
通过 vue 运行过程，我们不难发现，使用 template 时，多了第一步操作，使用 render 时直接进行第二步。
Runtime+compiler 与 Runtime-only 相比，runtime-only 性能更高，写的代码量更少。命令行中已经提示我们，能够压缩 6kb 的代码。
render 到底是什么呢？
render 函数实质就是生成 template 模板，通过调用一个方法生成，而这个方法又是通过 render 的参数来传递的。
用法1：普通用法
传递的 createrElement 方法有三个参数，分别提供：标签名、标签属性、标签内容
render:function(createElement){
return createElement('h2',{class:'box'},['内容'])
}
通过上述方法，就可以生成一个完整的模板。
用法2：组件用法
传入的是一个组件对象
import App from './App'
render:function(createElement){
return createElement(App)
}
我们实际 main.js 中，其实是对上边的简写，改写成箭头函数。
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
