什么是 generator-wng？
generator-wng 是一个可以帮助前端项目快速创建的 npm 包，实际上是一个基于 Yeoman 的前端项目生成器，它可以生成一个基础的前端项目结构，让我们省去搭建脚手架的时间，快速开始开发。
如何安装？
首先，你需要全局安装 Yeoman：
npm install -g yo
接着，安装 generator-wng：
npm install -g generator-wng
如何使用？
在你的项目根目录下，运行以下命令：
yo wng
然后根据提示输入你的项目名称、描述等信息，就可以自动生成基础的项目结构。
项目结构
生成的项目结构如下：
-- -------------------- ---- ------- - --- --- - --- ------ - - --- --- - - --- --- - --- ---------- - - --- ----------- - --- ----- - - --- ----------- - --- ------ - - --- -------- - --- ------- - --- ------- - --- -------- --- ------ - --- ----------- - --- ---------- - --- ---------- --- ------------- --- ------------ --- ---------- --- --------------- --- ------------ --- --------- --- ------------- --- ---------
其中，src 目录下是项目的源代码，public 目录下是公共文件，vue.config.js 是 Vue CLI 3 的配置文件，你可以在此文件中修改端口号等配置信息。
我们还提供了一些常用的插件和库，比如 Vue Router 和 Vuex，可以让你快速集成进项目中。
示例代码
为了演示如何使用 generator-wng，我们用它来创建一个 Vue 项目，并添加一个 Hello World 组件。
新建一个目录并进入：
mkdir my-project && cd my-project
运行 generator-wng：
yo wng
然后输入名称、描述、作者等信息，按照提示创建项目。
安装 Vue-Router 和 Vuex：
npm install vue-router vuex
并在 src/store.js 中引入 Vuex：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({})在 src/views 目录下新建一个 HelloWorld.vue 文件，添加以下代码：
-- -------------------- ---- ------- ---------- ----- -- ------- -- ------ ----------- -------- ------ ------- - ------ - ------ - -------- ------- ----- - - - ---------在 src/router/index.js 中配置路由：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------ ------ ---------- ---- ------------------------- ------------------ ----- ------ - - - ----- ---- ----- ------------- ---------- ---------- - - ----- ------ - --- ----------- ----- ---------- ----- --------------------- ------ -- ------ ------- ------修改 App.vue，使其引入 HelloWorld 组件：
-- -------------------- ---- ------- ---------- ---- --------- -------------- ------ ----------- -------- ------ ------- - ----- ----- - --------- ------- ---- - ------------ ------- ---------- ------ ----------- ----------------------- ------------ ------------------------ ---------- ----------- ------- ------ -------- ----------- ----- - --------运行项目：
npm run serve
打开浏览器，访问 http://localhost:8080，你应该能看到一个显示 Hello, WNG! 的页面。
总结
generator-wng 可以帮助我们快速创建前端项目结构，让开发变得更加高效。它的使用也非常简单，只需要通过命令行运行 yo wng 就能自动生成项目。在此基础上，我们还可以添加自己的代码、库和插件，快速构建出符合自己需求的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664781e8991b448e25d0