第 03 课：搭建项目模板框架

因为我们的脚手架是基于 Vue 开发框架的，所以本节课程中，我们将以 Vue 为基础来搭建起来我们的项目框架。使用 React、Angular 的读者可以对应替换调整。

项目初始化

创建项目目录，并执行 npm 初始化：

mkdir vueTpl & npm init -y

创建了项目模板目录 vueTpl，在目录下有一个 npm 的配置文件 package.json，其内容如下：

{
  "name": "vueTpl",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装 Webpack

执行以下命令，本地安装 Webpack 和 webpack-cli。

npm install --save-dev webpack webpack-cli

安装完后，在根目录下创建 webpack.config.js 等待在后面的步骤中使用。

安装 Vue

由于我们需要与 Webpack 模块打包器配合使用，所以推荐使用 npm 安装