使用Vue-cli3搭建Vue+TypeScript项目
一,创建项目
使用 npm
安装 vue-cli 3
和typescript
npm i -g @vue/cli typescript
使用vue create
命令快速搭建新项目的脚手架
vue create vue-ts
vue-ts 是我们的项目名称,执行上面的命令后,出现如下选项
这里是单项选择,可以按上/下键
切换选项,按enter
进入下一步。这两个选项分别表示:
default
是默认选项,后面的babel
,eslint
表示只会引入这两个Manully select features
是手动选择
因为我们要用到 Vue+TypeScript
,所以选择 Manully select features
。
按enter
,进入下一步:
这里是多项选择,按上/下键
切换选项,空格键
选择该选项,enter键
进入下一步。你可以根据项目的实际情况,选择相应的选项。
这里我准备做一个vue-ts学习笔记,后面还会继续学习如何在TypeScript
中使用 vuex
和router
,所以选择 Babel
, Typescript
, Router
, Vuex
, CSS Pre-processors
, Linter/ Formatter
这几项就可以了。
按enter
,进入下一步:
这里是询问是否使用 class风格
的组件语法,为了更方便地使用 TypeScript
,我们选择 Y。
当我们不知道选择那个选项时,可以直接按enter,使用默认选项。
按enter
,进入下一步:
这里不太清楚是什么意思,直接跳过,按enter使用默认选项。
按enter
,进入下一步:
这里是询问是否使用 router
的 history
模式,如果选择是,在生产环境中,服务端需要为索引回退做适当的配置。这个对我们的 demo 没有影响,同样按enter
使用默认选项。
按enter
,进入下一步:
这里是选择CSS预处理器
,可以自行选择一种。
按enter
,进入下一步:
这里是选择代码检查工具,我个人喜欢使用 ESLint + Prettier
。因为 Prettier
不仅可以格式化js代码
,还可以格式化 css
和 vue
模板文件中 template
部分的代码。
按enter
,进入下一步:
这里是选择什么时候进行代码格式化,选择 Lint on save
。
按enter,进入下一步:
这里是询问在什么地方配置 Babel,PostCSS, ESLint
等
In dedicated config files
在专门的配置文件中In package.json
配置在package.json
文件中
我们选择 In dedicated config files
,
按enter
,进入下一步
这里是询问:是否保存本次所选的配置,方便下次搭建项目时复用。
我们直接跳过,按enter,
等待项目初始化完成就可以了。
二,配置 .prettierrc
代码检查工具选择ESLint
+ Prettier
时,ESLint
与Prettier
相冲突的配置项会被关闭,采用的是Prettier
的配置项。这个文档,列出了ESLint
与Prettier
冲突的配置项。
由于个人习惯于 使用单引号字符串 和 句尾无分号,但是Prettier会将字符串格式化为双引号,并在句尾自动添加分号,因此需要单独配置。配置方法也很简单:
在项目根目录下(与 package.json 同级目录)创建一个 .prettierrc.js文件,并加上以下配置就可以了:
修改.eslintrc.js文件,加上这行代码就可以了:
现在我们来看一下是否配置成功了。先打开 sr/main.ts:
可以看到,双引号字符串 和 句尾的分号 都报错了,这时只需按ctr + s保存,就可以自动修正所有报错了。
最新文章
- Python 环境搭建,开发工具,基本语法
- 安装VisualStudio 2015 x64 中文企业版失败
- cisco HSRP实验
- sprint2 项目部署+展示
- WITH AS短语,也叫做子查询部分(subquery factoring)
- HDFS的体系结构和操作
- java常用string inputStream转换
- JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示
- eclipse 批量 查询 替换
- linux下安装python linux下一些常用的命令
- 记录终端输出的LOG到文件
- JS中event.keyCode用法及keyCode对…
- mybatis 和hibernate的区别
- C语言野指针
- 弱引用(WeakReference)
- u-boot移植(七)---代码修改---存储控制器
- C#去除HTML标签
- HttpURLConnection和HttpClient的简单用法
- iOS页面性能优化
- Django系列之form渲染表单后css样式丢失
热门文章
- 【CF1172E】Nauuo and ODT(Link-Cut Tree)
- asp.net core web api 生成 swagger 文档
- 转载:点云上实时三维目标检测的欧拉区域方案 ----Complex-YOLO
- Pycharm新手使用教程(详解)
- 使用Java操作Elasticsearch(Elasticsearch的java api使用)
- C# QRBarCode
- crm-2
- Chrome保存的HAR文件怎么打开?
- 1041. Robot Bounded In Circle
- Android SDK自带调试优化工具