Vue-Cli 创建 TypeScript 项目_创建一个typescript项目

一、What is TS？

TS语言，也就是TypeScript，是前端一个非常强大的语言超集，基于JavaScript。TS最大的特点，就是在JavaScript的基础上，设计了泛型、对象、继承、数据类型等等。JavaScript在我们开发中，报错非常高，因为JS属于弱类型语言，而TypeScript 具有强类型校验等特性，帮助前端开发人员更好的进行开发。

二、使用 Vue-Cli 创建 TypeScript 项目

1.创建项目存放目录：

        首先建立一个项目存放目录（你想把 vue脚手架创建的项目 存放在哪个盘的文件中就在哪里创建）。

        如下所示： E:\VueProjectLearn 在E盘创建一个文件目录。（根据你的 爱好创建即可）

2.创建 vue项目：

        在地址栏输入 cmd 并 回车，打开 控制台：

        输入： vue create vue_project 创建 vue 项目，并回车 。 （格式： vue create 项目名称)

        注意： 项目名称不要包含大写字母！！！

        Q：小问题：为什么项目名称不能包含大写字母？

        A： 回答：最新的规则要求项目名称不包含大写字母。（最新的 规则约束，可以使用 小写字母和下划线来命名你的项目）

        如下举例提示：

        创建项目如下所示：

        之后进入到项目初始模版选择界面，选择初始文件是 vue2模版还是 vue3 模版。但是，我们本文创建的是 vue + ts 项目，因此我们不选择 直接给我们生成好 vue2 或 vue3 模版，而是通过 自定义 的方式创建，可以灵活的选择哪些是我们需要的配置项，哪些是我们不需要的：

        各配置项说明如下：

        按空格选择和取消对应的配置项（例如我们选择 下图中的几项），选择完成后，按 回车键 进入下一步：

        选择是基于 Vue2 模版的 typescript 项目还是 Vue3， 这里我们选择 Vue3 作为 typescript项目的初始模版。

        （如果你是新手，推荐 先看 vue2 模版， vue3 在 vue2 的基础上 新增了 组合式API 的代码编写风格，较为灵活。vue2 主要采用 选项式API 代码编写风格，结构和逻辑能够快速学习和理解。 在vue2基础上过渡到vue3是不错的选择。）

        选择是否： 使用类样式的组件语法? (y/N) ，

        推荐 使用函数式组件语法，因为更加灵活，当前，如果你比较熟悉面向对象编程，也可以先从 类组件语法 开始进行学习。 这里我们不使用 类样式的组件语法， 输入 N， 使用则输入 Y：

 

        选择是否：使用 Babel做转义, 与 TypeScript一起用于自动检测，选择 Y：

 选择是否使用 路由的 使用历史记录模式 ？ 也可在项目中修改，这里我们选择 Y：

        选择一个 CSS 预处理器(默认支持 PostCSS、 Autoprefixer 和 CSS 模块) ：

这里选择语法检测模式： 这里我们选择的是 第一个 ESLint with error prevention only 只进行报错提醒，你也可以根据自己的需求，选择其他的模式：

• ESLint with error prevention only 只进行报错提醒

• ESLint + Airbnb config 不严谨模式

• ESLint + Standard config 正常模式

• ESLint + Prettier 严格模式 使用较多

        选择检查的方式：

        这里我们选择第一个 Lint on save 保存时检查 ，（可以都选择，按 空格 选择和取消）：

        （1）Lint on save 保存时检查

        （2）Lint and fix on commit 提交到远程时检查

        选择 Bable，ESLint 的配置位置：（这里我们选择在 独立文件中配置）

      （1）In dedicated config files 配置文件放入独立文件中

     （2）In package Json 配置文件放入package.json中

        保存为未来项目的预设值? (y/N)   

        即，后续创建其他项目是否直接选择此次设置的这些选择？

        这里我们选择 N ，不需要预设，每次自定义选择就可以。 （当前，你也可以保存为预设方式。那么下次 使用 vue create 项目名称时就可以看到你保存的预设模版）

        耐心等待一会项目初始化完成：

        根据 提示 输入 cd vue-ts 进入 项目文件 （也可以直接在对应项目的地址栏中输入 cmd进入等）：

        等待项目启动即可：

        在浏览器中访问：

        查看运行效果：

        使用vsCode打开项目可以看到我们配置的依赖项以及 集成了typescript。到这里整个项目的创建就结束了。