Vue+Typescript项目起手式

什么是typescript？

Typescript 是 Javascript 的强类型版本。然后在编译期间去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。

TypeScript 是 JavaScript 的超集，这意味着它支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提升代码的可阅读性。

与此同时，TypeScript 也是 JavaScript ES6 的超集，Google 的 Angular 2.0 也宣布采用 TypeScript 进行开发。这更是充分说明了这是一门面向未来并且脚踏实地的语言

强类型语言的优势在于静态类型检查，这里可以具体参见回答。概括来说主要包括以下几点:

• 静态类型检查
• IDE 智能提示
• 代码重构
• 可读性

起手vue-cli

这步就不详细介绍了，简单写一下构建的几步命令吧~

# 首先npm安装vue-cli3.0
npm install -g @vue/cli
# 创建一个项目
vue create hello-ts
或者
vue ui
# 根据自己的需求选择配置项
空格键是否选中，上下选择
······
一路回车，等待依赖下载完毕…
# 下载完毕，启动项目
cd hello-ts
npm run serve

vue config文件配置

下面是我们的文件的结构

##  文件介绍
 1.   node_modules //当前node模块存放处
 2.   public //index页面所在静态文件也可以放这个里面（不会被打包）
 3.   src //当前项目文件夹
        assets //静态文件存放（会被打包）
        components //组件存放
        views //当前项目存放地址
        app.vue //全局路由页面
        main.ts //总的入口文件
        router.ts //路由文件
        shims-tsx.d.ts //兼容jsx
        shims-vue.d.ts //兼容vue
        store.ts //vuex总文件
 4.  package.json //文件（我们安装的依赖都再里面可以看到，也可以根据这个去下载node_modules）
 5.  vue.config.js //vue配置，相当于老版本config>index.js

下面是vue.conig.js文件的配置

// vue.config.js
module.exports = {
    // 选项...
    // 当使用基于  HTML 5 history.pushState 的路由时；
    // 当使用 pages 选项构建多页面应用时。
    baseUrl:"",
    // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
    outputDir:"webApp",
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    assetsDir:"assets",
    // 指定生成的 index.