个人网站开发制作教程岳阳网站开发商城

Vite 是一个基于 Webpack 的开发服务器，用于开发 Vue 3 和 Vite 应用程序

一、创建一个vite项目

Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

npm create vite@latest
yarn create vite
yarn create vite my-vue-app --template vue
…
页面结构
↓↓↓

二、集成Vue Router

1.安装 vue-router@next插件

npm install vue-router@next
yarn add vue-router@next

2.在 src 目录下创建一个名为 router 的文件夹，并在其中创建一个名为 index.js 的文件。在这个文件中，我们将设置路由

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../view/home/index.vue'
import About from '../view/about/index.vue'const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]const router = createRouter({history: createWebHistory(),routes
})export default router

3. 在 src/main.js 中，导入并使用刚刚创建的路由

// src/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')

4. 在 src/App.vue 中，添加一个 router-view 组件来显示当前路由的内容

<template><div id="app"><router-view></router-view></div>
</template>
//-------------------
//vite.config.js  配置一下config
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({base: './',server: {host: '0.0.0.0'},plugins: [vue()],
})

…

---

总结