1.vue-cli3创建js项目

创建命令：vue create vue3-ts-demo

中间配置截图：

项目目录如图所示：

2.在js项目基础上创建ts项目

创建命令：vue add typescript

中间配置截图：

项目目录如图所示：

3.配置路由

安装路由：npm install vue-router -D

router.ts中配置

import { createRouter,createWebHashHistory } from 'vue-router'
//引入组件
import Home from './components/Home.vue'
//配置路由
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/',
            component:Home,
        }
    ]
})
//暴露路由
export default router;
复制代码

main.ts中挂载路由

4.配置vuex

4.1 以下是非组合式API中的代码规范

安装vuex: npm install vuex@next --d

/vux/store.ts中配置

import { createStore,Store} from 'vuex'
import { ComponentCustomProperties } from 'vue'

declare module '@vue/runtime-core' {
  // 声明自己的 store state  之后state中定义的内容都需要在接口中声明
  interface State {
    count: number
  }

  // 为 `this.$store` 提供类型声明
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

const store = createStore({
  state() {
    return {
        count: 1
    }
  },
  mutations: {
    increment(state:any):void {
      state.count ++
    }
  }
})
export default store;

复制代码

main.ts中挂载store

Home.vue页面应用:

<template>
  <div>
    home页面-----{{ $store.state.count }}
    <button @click="modifyCount">修改count</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Home',
  data() {

  },
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    modifyCount() {
      this.$store.commit('increment');
    }
  }
 })
</script>

复制代码

4.2 以下是组合式API中的代码规范

安装vuex: npm install vuex@next --d

/vux/store.ts中配置

import { createStore,Store} from 'vuex'
import { InjectionKey } from 'vue'


export interface State {
  count: number
}
export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore({
  state() {
    return {
        count: 1
    }
  },
  mutations: {
    increment(state:any):void {
      state.count ++
    }
  }
})

复制代码

main.ts中挂载store

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {store,key} from './vuex/store'
const app = createApp(App)

//挂载路由
app.use(router)
//挂在store
app.use(store,key)

app.mount('#app')

复制代码

Home.vue页面应用:

<template>
  <div>
    home页面-----{{ count }}
    <button @click="modifyCount">修改count</button>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex'
import { key } from '../vuex/store'

export default defineComponent({
  name: 'Home',
  setup() {
    const store = useStore(key);
    return {
      count: computed(()=>{
        return store.state.count;
      }),
      modifyCount():void {
        store.commit('increment');
      }
    }
  }
 })
</script>

复制代码