2024年最新Vue进阶（五十五）：vue-cli 脚手架 build(3)，2024年最新面试压茬

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

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

---

一、前言

build.js配置文件是npm run build 命令的入口配置文件，主要用于生产环境。

由于这是一个系统配置文件，将涉及很多模块和插件，所以这部分内容我将分多个文章讲解，请关注博主其他文章。

// 此文件运行在node环境中，使用webpack的nodejsAPI实现自定义构建和开发流程
// npm和node版本检查，请看我的check-versions配置文件相关文章
require('./check-versions')()

// 设置环境变量为production
process.env.NODE_ENV = 'production'

// ora是一个命令行转圈圈动画插件，好看用的
var ora = require('ora')
// rimraf插件是用来执行UNIX命令rm和-rf的用来删除文件夹和文件，清空旧的文件
var rm = require('rimraf')
// node.js路径模块
var path = require('path')
// chalk插件，用来在命令行中输入不同颜色的文字
var chalk = require('chalk')
// 引入webpack模块使用内置插件和webpack方法
var webpack = require('webpack')
// 引入config下的index.js配置文件，此配置文件我之前介绍了请自行查阅，主要配置的是一些通用选项
var config = require('../config')
// 下面是生产模式的webpack配置文件，请看我的webpack.prod.conf解释文章
var webpackConfig = require('./webpack.prod.conf')

// 开启转圈圈动画
var spinner = ora('building for production...')
spinner.start()

// 调用rm方法，第一个参数的结果就是 dist/static，表示删除这个路径下面的所有文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  // 如果删除的过程中出现错误，就抛出这个错误，同时程序终止
  if (err) throw err
  // 没有错误，就执行webpack编译
  webpack(webpackConfig, function (err, stats) {
    // 这个回调函数是webpack编译过程中执行
    spinner.stop() // 停止转圈圈动画
    if (err) throw err // 如果有错误就抛出错误
    // 没有错误就执行下面的代码，process.stdout.write和console.log类似，输出对象
    process.stdout.write(stats.toString({
      // stats对象中保存着编译过程中的各种消息
      colors: true, // 增加控制台颜色开关
      modules: false, // 不增加内置模块信息
      children: false, // 不增加子级信息
      chunks: false, // 允许较少的输出
      chunkModules: false // 不将内置模块的信息加到包信息
    }) + '\n\n')
    // 以上就是在编译过程中，持续打印消息
    // 下面是编译成功的消息
    console.log(chalk.cyan(' Build complete.\n'))
    console.log(chalk.yellow(
      ' Tip: built files are meant to be served over an HTTP server.\n' +


### Vue

* 什么是MVVM？

* mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

* 组件之间的传值？

* Vue 双向绑定原理

* 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

* 虚拟 DOM 实现原理

* Vue 中 key 值的作用？

* Vue 的生命周期

* Vue 组件间通信有哪些方式?

* vue 中怎么重置 data?

* 组件中写 name 选项有什么作用？

* Vue 的 nextTick 的原理是什么？

* Vuex 有哪几种属性?  

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

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

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

e8b7d1bb444279fc6aa23d42173794.png)

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