什么是 generator-vvey-test
generator-vvey-test 是一个基于 Yeoman 脚手架构建的前端项目生成器，为了方便快速地创建前端项目而设计，可以自动化地搭建以下项目：
- 简易前端工程，集成了 webpack+bable+sass 等开发环境，可进行多页应用或 SPA（单页应用）开发；
- 框架相关项目，如 Angular 和 Vue 的相应版本，可直接快速开启一个简单的 ANGULAR/VUE 项目；
安装 generator-vvey-test
在开始使用前，需要在安装 Yeoman，这里建议直接通过 npm 进行安装：
npm install -g yo
然后使用下列命令安装 generator-vvey-test：
npm install -g generator-vvey-test
使用 generator-vvey-test
生成前端项目所依赖于 Yeoman 这个工具，如果你已经安装成功了 Yeoman 和 generator-vvey-test，那么就可以开始使用 generator-vvey-test 创建项目啦！
- 打开命令行，进入项目想放的路径下；
- 输入下列命令，创建项目：
yo vvey-test
- 在这里就需要输入一些信息来确定项目的基础配置：
- Project Name: 输入项目名称；
- Description: 输入项目描述；
- Author: 输入作者名字；
- Port: 输入前端服务启动端口号。
- 是否创建 Angular/Vue 环境，根据需求选择。
- 完成以上配置后，输入 Y 开始自动生成模板，并下载项目所需的依赖包；
- 运行 npm run start 或 npm start 即可开启前端项目，工作目录下将生成以下目录：
-- -------------------- ---- ------- ------------- --- ----- --- -------- --- ------------- --- -------- - --- --- - --- --- --- ------- --- -------- - --- ----------- - --- ---------- - --- ------- --- ------------- - --- --- - --- ---- - --- ---- --- ---- --- --------- - --- ---- - --- ------- - --- ----------- - --- ----- --- ------- - - --- -------- - --- ------- - --- ----- - --- ------ - --- ----- - --- ------- - --- ----------- - --- ------- --- -------- --- ----- ---- --- ---------- --- -- ---- -- --- ----------------- --- ------------ --- ----------
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------- ----------
-------
------
---- ----------------
------- --------------------------------
-------
-------// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#root')-- -------------------- ---- -------
---- ------- ---
----------
-----
------ --------------------
------
-----------
--------
------ ------- -
----- -----
-
---------
------ -------
--- -
----------- -------
------ -----
---------- -----
-
--------总结
使用 generator-vvey-test 可以快速搭建前端项目，大大节省时间，提高工作效率。同时，通过阅读这篇教程，你也将学习到如何使用 Yeoman 工具来创建项目，以及如何使用 generator-vvey-test 生成前端项目。希望对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8a81e8991b448db4b7