二、跟vue相关的typescript 第三方常用类库，提供安装、配置（tsconfig.json 中的配置）、使用（类库引入和使用举例）

以下是几个与 Vue.js 相关的常用 TypeScript 第三方类库的详细安装、配置和使用示例。这些类库包括 Vuex、Vue Router、Axios、Vuetify、Element Plus 和 Pinia。

1. Vuex

安装

npm install vuex --save
npm install @types/vuex --save-dev

配置

{
  "compilerOptions": {
    "lib": ["esnext", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["vuex"]
  },
  "include": ["src/**/*"]
}

使用

// store/index.ts
import { createStore } from 'vuex';

interface State {
  count: number;
}

const store = createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
  },
});

export default store;

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store).mount('#app');

2. Vue Router

安装

npm install vue-router --save
npm install @types/vue-router --save-dev

配置

{
  "compilerOptions": {
    "lib": ["esnext", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["vue-router"]
  },
  "include": ["src/**/*"]
}

使用

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/about', component: () => import('@/views/About.vue') },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router).mount('#app');

3. Axios

安装

npm install axios --save
npm install @types/axios --save-dev

配置

{
  "compilerOptions": {
    "lib": ["esnext", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["axios"]
  },
  "include": ["src/**/*"]
}

使用

// api/index.ts
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

export default api;

// views/Home.vue
<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import api from '@/api';

export default defineComponent({
  setup() {
    async function fetchData() {
      try {
        const response = await api.get('/data');
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }

    return {
      fetchData,
    };
  },
});
</script>

4. Vuetify

安装

npm install vuetify --save
npm install @types/vuetify --save-dev

配置

{
  "compilerOptions": {
    "lib": ["esnext", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["vuetify"]
  },
  "include": ["src/**/*"]
}

使用

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

const vuetify = createVuetify({
  components,
  directives,
});

const app = createApp(App);
app.use(vuetify).mount('#app');

<!-- App.vue -->
<template>
  <v-app>
    <v-main>
      <v-container>
        <v-btn color="primary" @click="increment">Increment</v-btn>
        <p>{{ count }}</p>
      </v-container>
    </v-main>
  </v-app>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
});
</script>

5. Element Plus

安装

npm install element-plus --save
npm install @types/element-plus --save-dev

配置

{
  "compilerOptions": {
    "lib": ["esnext", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["element-plus"]
  },
  "include": ["src/**/*"]
}

使用

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus).mount('#app');

<!-- App.vue -->
<template>
  <el-button type="primary" @click="increment">Increment</el-button>
  <p>{{ count }}</p>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
});
</script>

6. Pinia

安装

npm install pinia --save
npm install @types/pinia --save-dev

配置

{
  "compilerOptions": {
    "lib": ["esnext", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["pinia"]
  },
  "include": ["src/**/*"]
}

使用

// store/index.ts
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

export default useCounterStore;

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia()).mount('#app');

<!-- App.vue -->
<template>
  <button @click="increment">Increment</button>
  <p>{{ count }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useCounterStore } from '@/store';

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();

    function increment() {
      counterStore.increment();
    }

    return {
      count: counterStore.count,
      increment,
    };
  },
});
</script>

总结

这些示例展示了如何在 TypeScript 项目中安装、配置和使用与 Vue.js 相关的常见第三方类库。通过这些配置和示例，你可以更好地集成这些库到你的项目中，并利用 TypeScript 的类型安全特性来提高代码质量和开发效率。【感谢通义千问】