Vue.js 是一款流行的前端框架，它的易用性和灵活性深受开发者的喜爱。而 TypeScript 是一种面向对象的编程语言，它可以提供更好的代码提示和类型检查。本文将介绍如何使用 TypeScript 开发 Vue.js 2.0 应用程序。
安装
首先，我们需要安装 Vue.js 和 TypeScript。可以使用 npm 或者 yarn 安装它们：
npm install vue typescript --save
或者
yarn add vue typescript
配置
接下来，我们需要配置 TypeScript。在项目根目录下创建 tsconfig.json 文件，并添加以下内容：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- ---------
--------- -----
------------------ -----
------------------------- -----
------------------------ -----
------------ -----
---------------- ------
------------------- -------
---------- ----
-------- -
------ ---------
-
--
---------- -
-------------
--
---------- -
--------------
-
-其中，compilerOptions 是 TypeScript 编译器的配置项。我们设置了目标编译版本为 ES5，模块化方式为 ES2015，开启了严格模式和装饰器支持。include 表示需要编译的文件路径，exclude 表示不需要编译的文件路径。
然后，我们需要配置 Webpack，以支持 TypeScript 文件的编译。在项目根目录下创建 webpack.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------- - ---------------------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- ----------
----------- ---------
--------- ----------
--
-------- -
----------- ------- ------ ------- ---------
------ -
---- ----------------------- --------
-
--
------- -
------ -
-
----- ---------
------- -------------
-------- -
-------- -
--- -----------
-
-
--
-
----- --------
------- ------------
-------- -
----------------- ----------
-
-
-
--
-------- -
--- -----------------
--
-------- -------------
--其中，entry 表示入口文件路径，output 表示输出文件路径。resolve 表示文件解析规则，我们添加了对 .ts 文件的支持。module 表示模块加载规则，我们使用了 vue-loader 和 ts-loader 来加载 Vue 组件和 TypeScript 文件。plugins 表示 Webpack 插件，我们使用了 vue-loader 插件。devtool 表示调试工具，我们使用了 SourceMap。
开发
现在，我们可以开始开发 Vue.js 应用程序了。在 src 目录下创建一个 App.vue 文件，并添加以下内容：
-- -------------------- ---- -------
----------
-----
------ ------- -------
------- -------------------------------------
------
-----------
------- ----------
------ - ---------- --- - ---- -------------------------
----------
------ ------- ----- --- ------- --- -
-------- ------ - ------ ------ --- -------------
------------ ---- -
------------ -- ----
-
-
---------其中，<template> 表示模板，<script> 表示脚本。我们使用了 vue-property-decorator 库，它提供了一些装饰器，可以简化 Vue 组件的开发。@Component 表示这个类是一个 Vue 组件，export default 表示默认导出这个类。message 是一个字符串类型的数据，表示消息内容。increment 是一个方法，表示点击按钮后增加一个感叹号。
然后，在 src 目录下创建一个 main.ts 文件，并添加以下内容：
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});其中，import 表示引入模块。new Vue 表示创建一个 Vue 实例，el 表示挂载元素的选择器，render 表示渲染组件的函数。
最后，在 index.html 文件中添加以下内容：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- --- ------------------ ------- ------ ---- --------------- ------- ------------------------------ ------- -------
其中，<div id="app"></div> 表示挂载元素，<script src="/dist/build.js"></script> 表示引入脚本文件。
运行
现在，我们可以运行应用程序了。在命令行中输入以下命令：
npm run dev
或者
yarn dev
然后，在浏览器中访问 http://localhost:8080，就可以看到应用程序的效果了。
总结
本文介绍了如何使用 TypeScript 开发 Vue.js 2.0 应用程序。我们首先安装了 Vue.js 和 TypeScript，然后配置了 TypeScript 和 Webpack。最后，我们开发了一个简单的 Vue.js 组件，并运行了应用程序。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657d838cd2f5e1655d85cfdb