使用tsx开发vue项目入门

很久不写博客了，最近在使用ts和tsx开发vue类项目，网上资料比较少，顺便记录一下方便同样开发的人互相学习共同进步。

本篇文章尽量不遗漏重要环节，本着真正分享的心态，不做标题党

下面进入正题：

由于现在vue的官方脚手架已经非常完善我们就不单独配置webpack了，节省大量的时间成本。

首先使用@vue/cli创建一个vue模版项目（记得是@vue/cli不是vue-cli还不知道的人可以点此传送门进入先导学习站）。

在自己觉得合适的目录下打开命令行输入如下代码,创建一个名为vue-tsx的项目

vue create vue-tsx

接下来的步骤vue的cli会给出相应的配置提示，着重配置已截图

第一步选择自定义配置

第二步选择如图的配置

剩下的按个人喜好自己选择就可以了

创建完成后的项目结构如图所示

从图上看出这是一个普通的vue模版项目，使用typescript语言开发

默认使用的仍然是vue的template进行渲染

正常在这种情况下就可以开发直接写代码了，模版项目所提供的示例代码已经很良心了

不过今天要介绍的是使用tsx语法进行开发vue项目

首先介绍一下什么事tsx

其实他就是typescript的jsx语法

那么什么是jsx呢？从这里介绍的话又变成无脑长文了，所以直接掠过，想了解jsx的人可以先去看一下react的开发文档5分钟上手

，但是必须要说的是为什么要使用tsx来写vue项目？vue提供的自带模版不香吗？网友对vue和react的争论喋喋不休到现在，我在这里给的答案其实很简单，vue和react之间没有好坏之分，论性能差距在使用上已经近乎55开，论生态各自都很完善了，这两个框架并存的原因很简单，vue的作者在自己的文章中曾经也提过，创造vue项目只不过是想有一个“自己用起来顺手的框架”。答案就在这句话上，所以我觉得没必要争论哪个好，其实没有可比性，只是喜欢的人各自会觉得对方好而已。

所以今天介绍tsx开发vue项目其实原因很简单，就是让适应了jsx语法的人能无缝从react过渡到vue上。就是给用起来舒服的人准备了一个方案而已。

所以继续我们的项目搭建

接下来先运行一下刚才的模版项目

在vue-tsx目录下打开命令行输入

npm run serve

出现如下图片证明以上操作全部没问题

以上操作全部通过后可以关闭服务器了，我们下一步要做的是修改项目的目录结构

首先

删除views文件夹，

删空components文件夹的内容保留文件夹，

删除App.vue文件

项目结构与图片一样即可，其他地方暂时不要动

首先将router文件夹中的index.ts文件内容修改为如下代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes:any = []

const router:VueRouter = new VueRouter({
  routes
})

export default router

然后修改main.ts中的代码为如下

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

并在src下新建名为App.tsx的文件内容为

import { Vue ,Component } from 'vue-property-decorator';
@Component
export default class App extends Vue{
	render(){
		return (
			<div>I am the first module of tsx for the Vue Project! </div>
		)
	}
}

其他地方暂时不需要改造

然后重新使用npm  run serve启动项目访问默认地址