vue3使用axios

Vue3与Vue2相比带来了许多更为方便的特性，其中使用axios是我们最常用的。使用Vue3+axios可以很方便地实现前后端交互。下面是Vue3中使用axios的示例：

const axios = require('axios').default;
const instance = axios.create({
  baseURL: 'http://localhost:3000/',
  timeout: 1000,
  headers: {'X-Requested-With': 'XMLHttpRequest'}
});
export default {
  get: async (path, payload) => {
    try {
      const res = await instance.get(path, {
        params: payload
      });
      return res.data;
    } catch (err) {
      return Promise.reject(err);
    }
  },
  post: async (path, data) => {
    try {
      const res = await instance.post(path, data);
      return res.data;
    } catch (err) {
      return Promise.reject(err);
    }
  }
}

vue3使用svg图标

Vue3中可以使用svg图标，可以很方便地实现使用SVG图标的需求。与Vue2相比，Vue3在使用SVG图标时更为简便。下面是Vue3中使用SVG图标的示例：

<template>
  <svg-icon icon-class="editor" />
</template>
<script>
import SvgIcon from '@/components/SvgIcon/index.vue'
export default {
  name: 'Example',
  components: {
    SvgIcon
  }
}
</script>

vue3使用ref

使用Vue3时，我们通常使用ref获取子组件。使用ref可以方便地操作DOM元素、子组件等，是Vue3中十分重要的新特性。下面是Vue3中使用ref的示例：

<template>
  <div ref="app">
    {{ message }}
  </div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
  setup() {
    const message = ref('Hello, Vue3!')
    const app = ref(null)
    onMounted(() => {
      console.log(app.value)
    })
    return {
      message,
      app
    }
  }
}
</script>

vue3使用路由

Vue3中使用路由非常简便，而且方便扩展。Vue3中的路由与Vue2相比基本没有太大的区别。下面是Vue3中使用路由的示例：

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

vue3使用pinia

Pinia是Vue3的新状态管理库。与Vue2的Vuex相比，Pinia更为轻量化，而且与Vue3的响应式系统更为紧密地结合。下面是Vue3中使用Pinia的示例：

import { defineStore } from 'pinia'
export const useTodoStore = defineStore({
  id: 'todo',
  state: () => ({
    todos: [
      {
        text: 'Learn Vue3',
        done: false
      }
    ]
  }),
  actions: {
    add(text) {
      this.todos.push({ text, done: false })
    },
    toggle(index) {
      this.todos[index].done = !this.todos[index].done
    }
  }
})

vue3使用插槽

Vue3中的插槽与Vue2相比基本没有太大的区别。下面是Vue3中使用插槽的示例：

<template>
  <div>
    <h1>{{title}}</h1>
    <slot name="header"></slot>
    <div>{{ content }}</div>
    <slot name="footer"></slot>
  </div>
</template>

vue3使用vue2组件

在使用Vue3过程中，我们可能会用到一些Vue2的组件。Vue3中可以兼容使用Vue2的组件。下面是Vue3中使用Vue2组件的示例：

import { createApp } from 'vue'
import App from './App.vue'
import Vue2Component from './Vue2Component.vue'
const app = createApp(App)
app.component('vue2-component', Vue2Component)
app.mount('#app')

vue3使用vuex

Vue3支持使用Vuex进行状态管理。与Vue2相比，Vuex在Vue3中也可以很方便地使用。下面是Vue3中使用Vuex的示例：

import { createStore } from 'vuex'
const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})
export default store

vue3使用antd

Ant Design是一套非常优秀的UI库，可以让我们快速地构建漂亮的网站。Vue3中也支持使用Ant Design。下面是Vue3中使用Ant Design的示例：

import 'ant-design-vue/dist/antd.css'
import { Button } from 'ant-design-vue'
export default {
  name: 'Example',
  components: {
    Button
  }
}

vue3使用计算属性

Vue3中支持使用计算属性。与Vue2相比，计算属性在Vue3中没有太大的变化。下面是Vue3中使用计算属性的示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <div>{{ content }}</div>
  </div>
</template>
<script>
import { computed } from 'vue'
export default {
  name: 'Example',
  setup() {
    const title = computed(() => {
      return 'Hello, Vue3!'
    })
    const content = computed(() => {
      return 'This is an example of Vue3 computed property.'
    })
    return {
      title,
      content
    }
  }
}
</script>

Vue3 使用详解