使用vue-cli3+typescript构建tsx开发模板的步骤分享
116 浏览量
更新于2024-08-30
1
收藏 114KB PDF 举报
基于 Vue CLI 3+TypeScript 的 TSX 开发模板搭建过程分享
本文将详细介绍使用 Vue CLI 3+TypeScript 创建基于 TS 的模板,并将模板方式改成 TSX 的方式,借助 vue-tsx-support 库。
知识点一:使用 Vue CLI 3+ 创建基于 TS 的模板
使用 Vue CLI 3+ 可以快速创建一个基于 TypeScript 的模板,命令如下:
```
vue create my-project
```
这将创建一个名为 my-project 的项目,并使用 TypeScript 作为默认语言。
知识点二:安装 vue-tsx-support 库
为了将模板方式改成 TSX 的方式,我们需要安装 vue-tsx-support 库,命令如下:
```
npm install vue-tsx-support --save
```
或
```
yarn add vue-tsx-support
```
安装结束后,我们需要对我们的文件做一些小改动。
知识点三:配置 main.ts 文件
在主入口文件 main.ts 中,我们需要引入 vue-tsx-support 库,代码如下:
```
import * as tsx from 'vue-tsx-support';
```
知识点四:删除 src/shims-tsx.d.ts 文件
为了避免和 vue-tsx-support/enable-check 声明重复冲突,我们需要删除 src/shims-tsx.d.ts 文件。
知识点五:配置 vue.config.js 文件
在 vue.config.js 文件中,我们需要在 configureWebpack 属性下增加一项 resolve,代码如下:
```
module.exports = {
// ...
configureWebpack: {
resolve: {
extensions: ['.js', '.vue', '.json', '.ts', '.tsx'] // 加入 ts 和 tsx
}
}
}
```
知识点六:创建 TSX 文件
现在,我们可以在 /components 下新建一个文件 button.tsx,代码如下:
```
import { Component, Prop } from 'vue-property-decorator';
import * as tsx from 'vue-tsx-support';
interface ButtonClick {
(value: string): void
}
interface ButtonProps {
text: string;
btnClick?: ButtonClick
}
@Component
export default class ZButton extends tsx.Component<ButtonProps> {
// ...
}
```
这样,我们就可以开始开发基于 TSX 的 Vue 项目了。
572 浏览量
107 浏览量
563 浏览量
428 浏览量
390 浏览量
107 浏览量
1436 浏览量
758 浏览量
点击了解资源详情

weixin_38731075
- 粉丝: 1
最新资源
- VB实现Excel数据导入到ListView控件技术
- 触屏版wap购物网站模板及多技术源码大全
- ZOJ1027求串相似度解题策略与代码分析
- Excel表格数据合并工具:高效整合多个数据源
- MFC列表控件:实现下拉选择与编辑功能
- Tinymce4集成Powerpaste插件即用版使用教程
- 探索QMLVncViewer:Qt Quick打造的VNC查看器
- Mybatis生成器:快速自定义实体类与Mapper文件
- Dota 2插件开发:TrollsAndElves自定义魔兽3地图攻略
- C语言编写单片机控制蜂鸣器唱歌教程
- Ansible自动化脚本简化Ubuntu本地配置流程
- 探索ListView扩展:BlurStickyHeaderListView源码解析
- 探索traces.vim插件:Vim的范围选择与模式高亮预览
- 快速掌握Ruby编译与安装的神器:ruby-build
- C语言实现P1口灯花样控制源代码及使用指南
- 会员管理系统:消费激励方案及其源代码