vue + typescript 项目构建

引言

近几年前端对 TypeScript的呼声越来越高，Typescript也几乎成为了前端必备的技能。TypeScript 作为 JS类型的超集，当中的泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足，让我们在开发中有了更严格的代码要求。

Typescript在单独学习时都还比较好理解，当它与VUE结合后两者都有着有着不小的改变。需要去查看框架提供的.d.ts的声明文件中一些复杂类型的定义、组件的书写方式等都要做出不小的调整。

VUE 3.0 也出来一段时间了，在学习vue3.0之前记录一下vue2.x结合Typescript的一些心得体会，在接下来的时间会学习vue3.0的语法，然后再分享出来，有不对的地方希望各位多多指正，共同学习 😄

官方脚手架安装

如果没有安装 vue cli 就先安装 cli
npm install --global @vue/cli

在最新的vue cli 工具中允许开发者使用 Typescript 集成环境创建新项目。
运行vue create my-product-name

1. 这里有自己遇到给一个坑，我是win10的系统无法选择选项
   在官方文档上查了一下，给出了一个解决办法
   
   重新在gitbash上测试，成功解决
   

2. first-config 这个选项是我自己本地配置一次后把我上一次的配置进行了保存，方便以后重用，这个后面会再讲

继续上面的配置，Default 是默认是 vue 2.x 版本，Default (Vue 3 Preview) 是 vue 3.0 版本，他们都包含了 babel 和 eslint 配置，Manually select features 是自己手动选择想要的配置，这里我们用这一项来进行Typescript的配置

空格手动选择所需要的内容，这里 Babel、Typescript、Router、Vuex、CSS Pre-processors、linter 是我所需要的导入的配置，Progressive Web App (PWA) Support 如果需要PWA的勾选它，我们没做单元测试所以也不需要 Unit Testing，同样 E2E Testing 也用不上，不用勾选

1. vue 版本选择，这里我们是2.x项目所以选择 2.x
   
2. Typescript 使用类样式的组件语法，这里选择yes
3. Babel 支持
4. vue-router 这里是用的 history 模式，需要后端支持才行，详情见 官方文档: HTML5 History 模式
5. css 扩展，这几个扩展的使用根据自己的需要做选择，这里不多赘述，我选择的是 dart-sass ，关于 dart-sass 和 node-sass 两者的区别网上有比较多的回答，我这里参考的 这个回答
6. ESLint 规范标准， 我选择的是 ESLint + Prettier
   然后是什么时候执行 ESLint 检测，我个人比较喜欢保存时进行ESLint处理
   
7. 最后就是刚才我执行 create 命令时出现的 first-config 选项出现的原因，你之前所有的配置都会保存到一个配置文件或者是 package.json 里面，方便下一次在直接使用该配置，可以进一步提高我们的开发效率
   第一步的 config files 配置已经知道怎么用了，这里我用 package.json 试一下，配置完毕以后，运行，最后会在本地保存一个 .vuerc 的配置文件
   
   
   .vuerc 的是用官方文档上有个解释
   至此项目构建完毕，打开项目后的目录结构是这样