个人网站开发制作教程,nginx wordpress优点,江南大学做网站,做网站的如何说服客户文章目录 Vite 是一个基于 Webpack 的开发服务器#xff0c;用于开发 Vue 3 和 Vite 应用程序 一、创建一个vite项目二、集成Vue Router1.安装 vue-routernext插件2.在 src 目录下创建一个名为 router 的文件夹#xff0c;并在其中创建一个名为 index.js 的文件。在这个文件中… 文章目录 Vite 是一个基于 Webpack 的开发服务器用于开发 Vue 3 和 Vite 应用程序 一、创建一个vite项目二、集成Vue Router1.安装 vue-routernext插件2.在 src 目录下创建一个名为 router 的文件夹并在其中创建一个名为 index.js 的文件。在这个文件中我们将设置路由3. 在 src/main.js 中导入并使用刚刚创建的路由4. 在 src/App.vue 中添加一个 router-view 组件来显示当前路由的内容 总结 Vite 是一个基于 Webpack 的开发服务器用于开发 Vue 3 和 Vite 应用程序
一、创建一个vite项目 Vite 需要 Node.js 版本 1820。然而有些模板需要依赖更高的 Node 版本才能正常运行当你的包管理器发出警告时请注意升级你的 Node 版本。 npm create vitelatest yarn create vite yarn create vite my-vue-app --template vue … 页面结构 ↓↓↓
二、集成Vue Router
1.安装 vue-routernext插件 npm install vue-routernext yarn add vue-routernext 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.vueconst 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 ./routerconst app createApp(App)
app.use(router)
app.mount(#app)
4. 在 src/App.vue 中添加一个 router-view 组件来显示当前路由的内容
templatediv idapprouter-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()],
})
… 总结
