前言
在前端开发中，使用生成器(generator)工具可以提高我们的开发效率，减少重复性的工作，特别是在使用一些框架的时候，生成器更是不可或缺的工具之一。在 Vue 的开发中，generator-vue-ts-starter 可以帮助我们快速创建一个 TypeScript 版本的 Vue 项目，让我们省去了繁琐的手动配置步骤，从而更快地进入项目开发。
安装使用
首先，你需要安装 Yeoman，它是一个生成器工具的基础框架。可以通过以下命令进行安装：
--- ------- -- --
安装 Yeoman 完成后，我们就可以安装 generator-vue-ts-starter 了。使用以下命令即可：
--- ------- -- ------------------------
安装完成后，我们就可以使用该工具来创建 Vue TypeScript 项目了。执行以下命令：
-- --------------
该命令将会根据你的输入配置创建一个项目，并且安装必要的依赖和配置文件。这个过程可能需要一点时间，请耐心等待。当一切配置就绪以后，你会看到如下的目录结构：
--- ------------ --- ------ - --- ----------- - --- ---------- --- --- - --- ------ - --- ---------- - --- ------ - --- ----- - --- ----- - --- ------- - --- ------- --- ----- --- ------------- --- ---- --- ------------ --- ---------- --- --------------- --- ------------ --- -------------
项目结构说明
下面是项目结构说明，让你更好地理解每个目录和文件的文件用途。
node_modules
存放项目的依赖包，通过执行 npm install 安装。
public
存放一些公共的静态资源，例如 favicon、index.html 等。
src
存放我们实际开发的代码和资源文件。
assets
存放图片、字体等静态资源。
components
存放所有的 Vue 组件。
router
存放路由配置文件。
store
存放 Vuex 的状态管理文件。
views
存放视图文件。
App.vue
Vue 应用的根组件。
main.ts
Vue 应用的主入口。
tests
存放测试代码。
.editorconfig
编辑器配置文件。
.env
环境变量文件。
.eslintrc.js
ESLint 配置文件，用来规范代码风格和检查语法错误。
.gitignore
Git 忽略文件列表。
babel.config.js
Babel 配置文件。
package.json
项目的配置文件，存放项目的信息、依赖、脚本等信息。
tsconfig.json
TypeScript 配置文件。
配置修改
在使用 yo vue-ts-starter 命令生成项目的时候，你也可以通过参数或者交互式的方式来修改默认配置。下面列出一些可配置的选项：
projectName：项目名称，默认为my-app。description：项目描述。authorName：项目作者名称。authorEmail：项目作者邮箱。moaType：移动端适配方式，默认为vw。moaSize：移动端适配大多数默认值，默认为375。isUseEslint：是否使用 eslint，默认为true。isUseCssLib：是否使用 CSS 库，默认为true。isUseVuex：是否使用 Vuex 状态管理，默认为true。
选择好你需要的参数后，它们将被自动化生成为默认配置文件。另外，也可以手动修改这些文件，以满足你的项目需求。
开发
项目已经默认配置好了 webpack、Vue、TypeScript 等工具，你可以在其中进行开发。启动开发服务器的方式也很简单：
--- --- -----
在浏览器中访问地址 http://localhost:8080/ 即可查看效果。
构建
项目开发完成后，需要编译和打包出发布版本。执行以下命令即可：
--- --- -----
在项目根目录下，将生成 dist 目录。这个目录下存放的就是编译出的代码。
总结
在这篇文章中，我们介绍了如何使用 generator-vue-ts-starter 快速创建一个 Vue TypeScript 项目，以及如何进行配置修改、开发、构建等操作。希望这篇文章能够帮助你更好地使用该工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005694481e8991b448e4c5e