以下是使用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。