Vue3与TSX
github地址:https://github.com/zmjm/vue3-tsx
涉及到的主要依赖
vite@2.0.4
vue@3.2.0
pinia
vue-router@4.0.4
typescript@4.2.2
准备工作
安装yarn
npm install yarn -g
安装vite
脚手架
npm install -g create-vite-app
# or
yarn add -g create-vite-app
开始
项目初始化
yarn create vite-app <project-name>
集成TS
yarn add --dev typescript
项目根目录创建配置文件:tsconfig.json
:
### 集成eslint
yarn add --dev eslint eslint-plugin-vue
项目根目录创建配置文件.eslintrc.js
:
集成pritter
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
项目根目录创建配置文件:.prettierrc.js
:
到这一步,一个Vue3+TSX的项目就搭建起来了,以上配置文件的具体内容就不做解释了。
修改入口文件
因为默认项目模板是以src/main.js
为入口的,我们需要把它修改为src/main.ts
。
在根目录的index.html
中修改入口文件的引用即可:
... ...
<body>
... ...
<script type="module" src="/src/main.ts"></script>
</body>
</html>
优化TS类型推断
在src目录下,创建shim.d.ts、source.d.ts
shim.d.ts
: (这个其实不太需要,因为项目中全是通过tsx开发的)
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
source.d.ts
: (优化编译器提示,声明静态资源文件)
declare const React: string;
declare module '*.json';
declare module "*.png"
declare module "*.jpg"
declare module "*.jpeg"
declare module "*.svg"
declare module "*.gif"
集成vue-router
yarn add --dev vue-router@4.0.4
这里可以去npm官网
查找最新版本
在src目录下,新建router文件夹
,并在文件夹内创建index.ts
index.ts
:
import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home'),
},
{
path: '/about',
name: 'About',
component: () => import('../views/About'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
这里创建router的方式与之前不同,在vue3中,结合TS的类型推断,开发效率会高很多。
集成pinia
yarn add pinia
Pinia 是一个 Vue 的存储库,它应该就是vue官方提供的vuex5了,它取消了mutations,更适合组合式API的开发风格,适用于vue3.2以后的版本,之前的版本会报错
在src目录下,新建store文件夹,并在文件夹内创建index.ts
main.ts
最终main.ts中引入store、router:
import { createApp } from 'vue';
import App from './App';
import router from './router';
import store from './store';
createApp(App).use(router).use(store).mount('#app');
TSX
最终我们的组件代码,都会是这样的:App.tsx
:
import { defineComponent } from 'vue';
import {RouterLink, RouterView} from 'vue-router';
import './style/main.scss'
export default defineComponent({
name: 'App',
setup() {
return () => (
<>
<div id="nav">
<RouterLink to="/">Home</RouterLink> |
<RouterLink to="/about">About</RouterLink>
</div>
<RouterView/>
</>
);
}
});
个人对于tsx的理解
自我感觉vue3对tsx的支持还算不上完美,毕竟vue3对template做了更多的静态支持,tsx现在只应该适用于某些场景下追求极致的选择,相应地需要付出更多开发成本。而但从开发体验来讲,说实话,一般,没有模版体验好。因为它并不像 react,react 基本和写 ts 没区别了,但是 Vue 的 TSX,说实话,目前离那个体验还很远,反而你失去了很多 SFC(就是 vue) 的好处。当然前端这个内卷的程度,多学点哪怕面试的时候能用到也是有用的。