vue3.x 采用Function-based API 形式组织代码,使其更容易压缩代码且压缩效率也更高,由于 修改了组件的声明方式,以函数组合的方式完成逻辑,天然与typescript 结合。(vue2.x中的组件是通过声明的方式传入一系列options的,所以在2.x下使用typeScript 需要装饰器的方式vue-class-component
才行)
// vue2.x 要想使用ts 需要这样处理,详见官方文档 https://cn.vuejs.org/v2/guide/typescript.html <script lang="ts"> import Vue from 'vue' import Component from 'vue-class-component' @Component export default class App extends Vue {} </script> 复制代码
npm install -g @vue/cli 复制代码
vue create vue-next-project 复制代码
这里在输入命令后,需要选择Manually select features
, 至少要把 babel
typescript
router
选上,(vuex
看自身情况是否需要)。如下图:
不清楚vue-cli 的可参考文章
cd vue-next-project vue add vue-next 复制代码
这个命令会自动帮你把vue2.x升级到vue3.x ,包括项目中对应的依赖进行升级与模板代码替换,像:vue-router
vuex
完成以上三步主体环境算搭建完成,看刚才创建的目录里多了个tsconfig.json 配置文件,可以根据自身与项目需要,进行配置。
接下来需要简单处理一下,使其支持typescript形式。(模板cli还没完善typescript的模板代码)
shims-vue.d.ts
文件中的内容修改一下,这步操作应该会少了一些报错。// declare module "*.vue" { // import Vue from 'vue'; // export default Vue; // } declare module "*.vue" { import {defineComponent} from 'vue' const Component: ReturnType<typeof defineComponent>; export default Component } 复制代码
script lang="ts"
,然后用defineComponent
进行包裹,即可。<script lang="ts"> import { defineComponent, ref, onMounted, onUpdated, onUnmounted, } from "vue"; export default defineComponent({ name: "hello world", props: {}, setup(props: any) { const count = ref(0); const increase = (): void => { count.value++; }; function test(x: number): string { return props.toString(); } test(1); // test('number'); // 生命周期 onMounted(() => { console.log("mounted vue3 typescript"); }); onUpdated(() => { console.log("updated vue3 typescript"); }); onUnmounted(() => { console.log("onUnmounted vue3 typescript"); }); // 暴露给模板 return { count, increase }; }, }); </script> 复制代码
生命周期对应
vue3+typescript环境