用vue3和ts仿写cnode

好的，首先我们需要了解一下什么是CNode社区以及它的API接口。CNode社区是一个基于Node.js的开源社区，提供了讨论、分享、帮助等功能，API接口文档可以在官网上找到。

接下来，我们可以使用Vue3和TypeScript来实现CNode社区的一个简单版本。步骤如下：

1. 创建Vue3项目

使用Vue CLI 4来创建一个Vue3项目，命令如下：

vue create cnode

在创建过程中，选择TypeScript和Vue 3.x版本。

2. 安装依赖

在项目目录下执行以下命令安装axios和vuex等依赖：

npm install axios vuex --save

3. 编写API封装

我们可以将CNode社区的API封装在一个单独的文件中，便于统一管理和调用。在src目录下创建一个api目录，然后新建一个cnode.ts文件，编写以下代码：

import axios from 'axios'

const baseUrl = 'https://cnodejs.org/api/v1'

export const getTopics = (params: any) => {
  return axios.get(`${baseUrl}/topics`, { params })
}

export const getTopicDetail = (id: string) => {
  return axios.get(`${baseUrl}/topic/${id}`)
}

这里我们封装了两个API接口，分别用于获取话题列表和话题详情。

4. 编写状态管理

使用Vuex来进行状态管理，我们需要在src目录下创建一个store目录，并在其中创建一个index.ts文件。先编写state和mutations代码：

import { getTopics, getTopicDetail } from '@/api/cnode'

interface State {
  topics: any[],
  topicDetail: any
}

const state: State = {
  topics: [],
  topicDetail: {}
}

const mutations = {
  setTopics(state: State, topics: any[]) {
    state.topics = topics
  },
  setTopicDetail(state: State, detail: any) {
    state.topicDetail = detail
  }
}

export default {
  state,
  mutations,
}

这里我们定义了两个状态topics和topicDetail，以及对应的mutations来修改状态。

然后编写actions代码：

import { ActionTree } from 'vuex'
import { getTopics, getTopicDetail } from '@/api/cnode'
import { State } from './index'

const actions: ActionTree<State, any> = {
  async fetchTopics({ commit }, params) {
    const res = await getTopics(params)
    if (res.status === 200) {
      commit('setTopics', res.data.data)
    }
  },
  async fetchTopicDetail({ commit }, id) {
    const res = await getTopicDetail(id)
    if (res.status === 200) {
      commit('setTopicDetail', res.data.data)
    }
  }
}

export default actions

这里我们定义了两个actions，分别用于获取话题列表和话题详情。在actions中调用对应的API接口，并通过mutations来修改状态。

5. 编写页面组件

我们可以编写两个组件，分别用于展示话题列表和话题详情。在src目录下创建一个views目录，并在其中分别创建Topics.vue和TopicDetail.vue文件。

Topics.vue代码：

<template>
  <div>
    <ul>
      <li v-for="topic in topics" :key="topic.id">
        <router-link :to="{ name: 'detail', params: { id: topic.id } }">{{ topic.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'Topics',
  setup() {
    const store = useStore()

    const topics = store.state.topics

    store.dispatch('fetchTopics', { page: 1, limit: 20 })

    return {
      topics
    }
  }
})
</script>

这里我们使用了Vue3的Composition API，通过useStore来获取store实例，并在setup函数中调用fetchTopics action来获取话题列表数据。

TopicDetail.vue代码：

<template>
  <div>
    <h1>{{ topicDetail.title }}</h1>
    <div v-html="topicDetail.content"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRoute, useRouter, useStore } from 'vue-router'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'TopicDetail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()

    const topicDetail = store.state.topicDetail

    store.dispatch('fetchTopicDetail', route.params.id)

    return {
      topicDetail
    }
  }
})
</script>

这里我们同样使用了Composition API，通过useRoute和useRouter来获取路由相关信息，并在setup函数中调用fetchTopicDetail action来获取话题详情数据。

6. 配置路由

在src目录下创建一个router目录，并在其中创建一个index.ts文件。编写以下代码：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Topics from '@/views/Topics.vue'
import TopicDetail from '@/views/TopicDetail.vue'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'topics',
    component: Topics
  },
  {
    path: '/topic/:id',
    name: 'detail',
    component: TopicDetail
  }
]

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

export default router

这里我们定义了两个路由，分别对应话题列表和话题详情页面。

7. 启动项目

最后，在项目根目录下执行以下命令启动项目：

npm run serve

访问http://localhost:8080/即可看到话题列表页面。

这就是一个简单的使用Vue3和TypeScript实现的CNode社区仿写。