vue3+typescript创建项目详细步骤
2020-06-12 本文已影响0人
执剑饮烈酒
1、新建一个文件夹;
2、vue/cli全局安装:cnpm install -g @vue/cli 或者 npm install -g @vue/cli;
3、创建项目名称:vue create 项目名称;
4、配置文件(根据个人喜好选择):
如图:
1)、第一个选项是预设配置项,第一个只包含babel,eslint,要选第二个,可以自由配置。
![](https://img.haomeiwen.com/i3640628/e5f4c4e7e1f9a930.png)
选择第二项,出现如图配置(空格搭配上下键选择):
![](https://img.haomeiwen.com/i3640628/94aa4d2ad3d505f3.png)
babel是用来适配一些js的新特性,浏览器还不支持的,但是可以通过其它方式实现它的语法
typescript就是启用typescript支持
PWA这个是渐进式web应用,如果用不上,不需要选
Router是vue-router
css pre-processors是用来支持css预处理器的,less,sass这些
linter是用来做代码检验的,如代码缩进,规范合不合格之类的,都是它来校验
2)、这2个是自动化测试框架,可以不选;测试代码有没有bug,符不符合预期用的
![](https://img.haomeiwen.com/i3640628/b8e989c236eecc69.png)
3)、class-style component syntax,像react的风格,是否启用类作为组件模型,这个建议开启。
![](https://img.haomeiwen.com/i3640628/5a272bf527047bfe.png)
4)、配置babel对ts,jsx的转义,要开启
![](https://img.haomeiwen.com/i3640628/b4dbdf4bb77b6f7b.png)
5)、路由管理模式,Y是HTML5 history,N是hash模式
![](https://img.haomeiwen.com/i3640628/da44a8c1ccb38092.png)
6)、预处理器,根据自己习惯选择;
![](https://img.haomeiwen.com/i3640628/26b4905e55052943.png)
7)、这个是代码风格约束的选择项;
![](https://img.haomeiwen.com/i3640628/fafa3f3d7aa81a13.png)
8)、对git提交时候的风格校验;第一个是保存的时候,第二个是commit的时候推荐2个都开启
![](https://img.haomeiwen.com/i3640628/e01c02374e486574.png)
9)、置配置文件的管理路径,建议选第一个,每一个单独生成配置文件,第二个都会堆在package.json,
![](https://img.haomeiwen.com/i3640628/1af23849743d37cf.png)
10)、把这些配置是否保存为模板,选择N
![](https://img.haomeiwen.com/i3640628/913f59598c1754bd.png)
11)、成功创建项目;
![](https://img.haomeiwen.com/i3640628/cedbd194b132325d.png)