介绍
generator-vue-typescript 是一个 Yeoman 生成器，目的是帮助快速创建一个使用了 Vue.js, TypeScript 以及 Webpack 的项目。
该项目的源码在 GitHub 上公开，开源 MIT 许可证。若有兴趣深入了解该项目的实现，可以查看源码：https://github.com/ashabuilder/generator-vue-typescript
准备工作
使用 generator-vue-typescript 生成器之前，需要先安装 npm 环境。npm 是 Node.js 的包管理工具，如果还没有安装 Node.js，可以访问 https://nodejs.org/ 下载安装文件，安装成功后，npm 就已经配置好了。
在安装 Yeoman 时，可以使用 npm 来进行安装：
$ npm install -g yo
使用方法
安装完成 Yeoman 后，就可以全局安装 generator-vue-typescript 了：
$ npm install -g generator-vue-typescript
安装完成后，创建一个便于测试的空文件夹，并在该文件夹内运行 Yeoman：
$ mkdir test-project $ cd test-project $ yo vue-typescript
在默认情况下，该生成器会问一些问题以便于了解你的项目需求以及配置选项。可以不用理会这些问题，直接按 enter 键即可采用默认设置。
这时候就可以使用以下命令启动项目：
$ npm run dev
之后在浏览器中访问 http://localhost:8080，就可以看到项目首页了。
示例代码
以下是一个简单的 Hello World 例子：
-- -------------------- ---- -------
------ --- ---- ------
----- ------------------- - ------------
--------- -------- -------- ----------
------ -
------ -
--------- ------- --------
--
--
---
--- -------------------------------------这个例子中使用了 TypeScript 编写了一个 Vue.js 组件，并将该组件渲染在了文档中的一个 <div id="app"></div> 元素中。在组件的 data 方法中，定义了一个变量 greeting，而该变量则被在组件的 template 中直接绑定使用了。
总结
本文介绍了如何使用 Yeoman 生成器 generator-vue-typescript 来快速创建 Vue.js + TypeScript + Webpack 的项目，并配合简单的代码示例来帮助理解。Yeoman 生成器的使用可以提高开发效率，节约时间成本，是前端开发必备的工具之一。
如果我们需要大量开发类似的 Vue.js 项目或者其他前端项目，使用该生成器将是一个不错的选择。同时，如果对生成器的实现有兴趣，也可以通过阅读源码来深入了解其实现原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557c981e8991b448d4d1a