Vue3.0 + Vite 搭建 + API详解

以下是使用Vue 3.0和Vite搭建项目的基本步骤，以及API的简要说明和示例代码。

搭建新的Vue 3.0 + Vite项目

确保你已安装了Node.js（建议版本8以上）。
使用npm安装Vue CLI：




npm install -g @vue/cli

创建一个新的Vue 3.0项目：




vue create my-vue3-app
# 在提示选择预设时，选择 "Manually select features"
# 然后选择 "Choose Vue version" 选择 "3.x"
# 之后按需选择其他特性




cd my-vue3-app
npm run dev

Vite API 详解

Vite 提供了一些API供开发者在项目中使用。以下是一些常用API的简要说明和示例代码。

插件API

插件可以通过Vite的插件API进行开发。




import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

生命周期API

Vue 3.0 引入了Composition API，其中setup函数类似于Vue 2.x中的created和mounted生命周期钩子。




<template>
  <div>{{ msg }}</div>
</template>
 
<script>
import { ref, onMounted } from 'vue'
 
export default {
  setup() {
    const msg = ref('Hello, Vite!')
 
    onMounted(() => {
      console.log('Component is mounted!')
    })
 
    return { msg }
  }
}
</script>

路由API

Vite项目中可以使用Vue Router。




import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
 
const routes = [
  { path: '/', component: Home }
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
 
export default router

状态管理API

Vue 3.0 支持 Vuex 4.x 版本。




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

请求API

可以使用Axios等库进行HTTP请求。




import axios from 'axios'
 
export const fetchData = async () => {
  try {
    const response = await axios.get('/api/data')
    return response.data
  } catch (error) {
    console.error(error)
  }
}

以上是搭建Vue 3.0 + Vite项目和一些常用API的简要说明和示例代码。实际开发中，根据项目需求，可能还需要使用到Vite提供的其他高级特性和API。