Sping Boot + Vue + Webpack 项目实战（二）：使用webpack构建vue项目

使用webpack构建的简单例子：https://github.com/AndyRuiDy/ztodo.git

前言

到了这里，我们就开始来构建项目。

在网上有很多都是使用vue-cli脚手架工具，vue-cli确实是最能体现vue的特性的，但使用vue-cli有一定局限性，这里不描述，想知道的可以自行去了解，vue-cli比较适合中小项目。

接下来实战过程中，如果不是很清楚的，欢迎提出

在构建项目之前，希望大家对webpack有所了解

前端项目构建

1、初始化项目

在指定磁盘中创建一个文件夹，使用黑窗口或使用vscode打开

运行 npm init 来初始化构建package.json文件，图下是构建一个基础的package.json文件，如图：

命令行以交互式的让你填一些项目信息，说明如下：

• name 项目名称
• version 项目的版本号
• description 项目的描述信息
• entry point 项目的入口文件
• test command 项目启动时脚本命令
• git repository 如果你有 Git 地址，可以将这个项目放到你的 Git 仓库里
• keywords 关键词
• author 作者叫啥
• license 项目要发行的时候需要的证书（平时玩玩忽略它）

构建完之后，我们就可以来安装依赖包了

2、安装所需的依赖包

1、安装webpack，如果是4以上的版本需要安装webpack-cli

npm install --save-dev webpack webpack-cli

安装成功后会有一些警告

fsevents 是Mac系统的可选依赖，我这使用的windows系统，但它还是下载了，如果是跟我一样的操作系统，可以忽略它

2、安装 vue 及相关基础包

npm install vue -S
npm install -D vue-loader vue-template-compiler
npm install