vue + typescript 项目构建

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

vue + typescript 项目构建_第1张图片

  1. 这里有自己遇到给一个坑,我是win10的系统无法选择选项vue + typescript 项目构建_第2张图片
    在官方文档上查了一下,给出了一个解决办法
    vue + typescript 项目构建_第3张图片
    重新在gitbash上测试,成功解决
    vue + typescript 项目构建_第4张图片

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

继续上面的配置,Default 是默认是 vue 2.x 版本,Default (Vue 3 Preview) 是 vue 3.0 版本,他们都包含了 babel 和 eslint 配置,Manually select features 是自己手动选择想要的配置,这里我们用这一项来进行Typescript的配置
vue + typescript 项目构建_第5张图片
空格手动选择所需要的内容,这里 Babel、Typescript、Router、Vuex、CSS Pre-processors、linter 是我所需要的导入的配置,Progressive Web App (PWA) Support 如果需要PWA的勾选它,我们没做单元测试所以也不需要 Unit Testing,同样 E2E Testing 也用不上,不用勾选

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

你可能感兴趣的:(前端,vue.js,typescript,javascript,sass,前端)