2024年Web前端最新Vue学习3：Vue CLI_vuecli3 createelement，面试小知识

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

+ [4. npm-run-build/dev](#4_npmrunbuilddev_50)

• 三、Vue CLI3的使用

一、认识Vue CLI

CLI是Command-Line Interface，命令行界面，俗称脚手架，vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。
vue CLI使用前提：node、npm、webpack

Vue CLI使用

• 安装：npm install -g @vue/cli 安装的是CLI3的版本
• 拉取CLI2版本：npm install -g @vue/cli-init
• Vue CLI2初始化项目：vue init webpack my-project
• Vue CLI3初始化项目：vue create my-project

如果说npm install -g @vue/cli 不行的话，首先考虑是用管理员身份打开，不行的话可以输入npm clean cache -force 实际上清空的是以下目录里的所有内容。如果还不行就要考虑重装node等等解决办法

二、Vue CLI2的使用

1. 基本使用

遇到问题：

禁止运行脚本的解决办法
执行策略的问题

步骤：

• vue init webpack vuecli2test 并设置相关的选项
• 运行：npm run dev开发，npm run build构建发布
  
  然后生成了vuecli2test的文件夹，目录结构如下
  

2. ESlint

注意，在创建时，如果选择了使用ESlint会有严格的规范，代码很容易报错，譬如严格的空格、缩进还有分号，如果想禁用，可以在config目录的index.js文件中修改其中：useEslint: false

3. runtime-compiler与runtime-only的区别

先了解：
vue程序运行过程：template->ast->render->vdom->ui

runtime-compiler：template -> ast -> render -> vdom -> ui
runtime-only：render -> vdom -> ui 性能更高、代码更少

• h实际上是createElement这个函数

	render: function(createElement) {
		//createElement('标签', {标签属性}, ['内容'])
		//return createElement('h2', {class: 'box'}, ['Hello world']);
		//可以传入组件
		return createElement(App); //这里的App中的template已经由vue-template-compiler转成成render了


### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

* **前端字节跳动真题解析**  

  ![](https://img-blog.csdnimg.cn/img_convert/8d27500df7b25342f252bca635ca0ab3.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

4bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。