1. 书写静态页面（HTML+CSS）
2. 拆分组件

• 注意1：拆分内容，组件结构+组件样式+图片资源
• 注意2：项目使用less样式浏览器不支持，需要通过less、less-loader进行处理，转为普通css

在生产环境下，每次打包构建后，都会生成hash值不用的文件，造成了很多冗余的文件，因此我们需要引入一个插件来在打包的时候先清理目录。

javascript现在更新的比较快，很多新的语法在浏览器中不一定兼容，因此我们需要利用babel来处理这个问题，将对应的js语法翻译成浏览器可识别的。

在webpack中，mode改成"production"后默认只能压缩html和js，因此我们需要引入插件optimize-css-assets-webpack-plugin主动压缩css。

项目创建

创建项目文件夹

运行项目时会出现以下报错：
loaderContext.getResolve is not a function
原因：less-loader版本太高
解决办法：
修改package.json文件：

雷区

上一节已经画出了雷区，并且按位置放置好了雷，那么这一节，就要开始交互处理了。

但是，细细一想，在扫雷游戏中，每个雷区都会有遮罩(mask)、雷、旗、问号等显示，并且需要处理鼠标的左/右键的点击事件，相对来说，这算一个比较复杂的功能了。既然如此，就新写一个组件 Square.vue 吧。