vue vite实现
vue vite实现
Vite 是一个现代化的前端构建工具，专为 Vue 3 设计，提供快速的开发体验。以下是使用 Vite 实现 Vue 项目的步骤：
创建项目 使用以下命令创建一个新的 Vue 项目：
npm create vite@latest my-vue-app --template vue进入项目目录并安装依赖：
cd my-vue-app
npm install项目结构 Vite 生成的 Vue 项目结构如下：
src/：存放源代码main.js：应用入口文件App.vue：根组件
public/：存放静态资源vite.config.js：Vite 配置文件
开发模式 启动开发服务器：
npm run devVite 会启动一个本地服务器，支持热模块替换（HMR），修改代码后立即生效。
生产构建 构建生产环境代码：
npm run build生成的代码会放在 dist/ 目录下，优化并压缩以便部署。
配置 Vite
在 vite.config.js 中可以自定义配置：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 3000
}
})添加 Vue Router 安装 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'
createApp(App).use(router).mount('#app')添加状态管理（Pinia） 安装 Pinia：
npm install pinia在 main.js 中配置 Pinia：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')创建 store：
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
}
}
})环境变量
创建 .env 文件：
VITE_API_URL=https://api.example.com在代码中访问环境变量：
const apiUrl = import.meta.env.VITE_API_URL部署
构建完成后，将 dist/ 目录部署到任何静态文件服务器，如 Nginx、Vercel 或 Netlify。
