前言
前端开发日益复杂，需要使用到各种工具，如 Webpack、Vue 等等。如何快速的构建项目原型呢？这时候就需要使用脚手架工具了。而 generator-vue-webpack 就是一个非常好用的生成 vue-webpack 项目脚手架的 npm 包。
generator-vue-webpack 的安装
使用 generator-vue-webpack 需要先全局安装 Yeoman：npm install -g yo，然后再安装 generator-vue-webpack：npm install -g generator-vue-webpack。
generator-vue-webpack 的使用
在安装完成后，我们就可以使用 generator-vue-webpack 生成项目框架了。首先，选择一个你喜欢的目录作为项目根目录，在这个目录下执行 generator-vue-webpack：yo vue-webpack。命令行会询问一些问题，如项目名称、项目描述、作者等，之后自动生成一个包含 Vue 和 Webpack 的项目框架。
generator-vue-webpack 文件结构分析
生成的项目框架主要分为两个部分：
- 完整的 webpack 配置文件结构，包括开发环境与生产环境的配置。
- Vue 项目结构。这里介绍一个标准的 Vue 单文件组件结构：
-- -------------------- ---- ------- ---------- --- ----------- -------- --- --------- ------- --- --------
generator-vue-webpack 常用命令
- 启动开发环境：
npm run dev。 - 构建生产环境代码：
npm run build。 - 构建并发布到生产服务器：
npm run deploy。
总结
通过 generator-vue-webpack，我们可以轻松的构建出 Vue 和 Webpack 的前端项目，进而进行高效的开发。上述内容涵盖了 generator-vue-webpack 的安装、使用、文件结构分析、以及常用命令等方面，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd481e8991b448e6680