vue vite实现
Vue 3 + Vite 实现快速开发
Vite 是一个现代化的前端构建工具，专为 Vue 3 设计，提供极速的开发体验。以下是使用 Vue 3 和 Vite 搭建项目的详细方法。
创建项目
通过 npm 或 yarn 初始化一个 Vue 3 项目，Vite 会自动集成。运行以下命令：
npm create vite@latest my-vue-app --template vue或使用 yarn：
yarn create vite my-vue-app --template vue项目结构
创建完成后，项目结构通常如下：
my-vue-app/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ └── main.js
├── vite.config.js
├── package.json
└── index.html配置 Vite
修改 vite.config.js 以自定义配置。例如，添加插件或调整构建选项：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 3000,
open: true
}
})开发与构建
启动开发服务器：
npm run dev构建生产版本：
npm run build预览生产版本：
npm run preview使用 Vue 3 特性
在 src/App.vue 中，可以使用 Vue 3 的 Composition API：
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">Count: {{ count }}</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello Vite + Vue 3!')
const count = ref(0)
const increment = () => {
count.value++
}
</script>添加路由
安装 Vue Router：
npm install vue-router@4创建路由配置文件 src/router/index.js：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{ path: '/', component: Home }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在 main.js 中引入路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')状态管理
安装 Pinia（推荐的状态管理库）：
npm install pinia创建 store 文件 src/store/counter.js：
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
}
}
})在组件中使用：
<script setup>
import { useCounterStore } from '../store/counter'
const counter = useCounterStore()
</script>部署
构建完成后，dist 目录中的文件可以部署到任何静态文件服务器。例如，使用 Vercel 或 Netlify 进行自动化部署。
性能优化
Vite 默认支持代码分割和懒加载。可以通过动态导入实现组件懒加载：
const Home = () => import('./views/Home.vue')插件生态系统
Vite 支持丰富的插件，例如：
@vitejs/plugin-vue：Vue 单文件组件支持vite-plugin-pwa：PWA 支持unplugin-auto-import：自动导入 API
安装插件后，在 vite.config.js 中配置即可。
