赞
踩
目前界面长成这样:
修改vite.config.js
import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import path from "path" // https://vitejs.dev/config/ export default defineConfig({ server: { open: true, port: 8088, }, plugins: [vue()], resolve: { alias: { "@": path.resolve(__dirname, "src"), } } })
这里配置别名的核心代码是:
"@": path.resolve(__dirname, "src"),
创建 src/page/home/index.vue
<script setup>
</script>
<template>
home
</template>
<style scoped>
</style>
修改src/router/index.js,这里主要是配置首页的路由:
import { createWebHashHistory, createRouter } from 'vue-router' const routes = [ { path: "/", name: "Home", component: () => import("@/page/home/index.vue") } ] const router = createRouter({ history: createWebHashHistory(), routes, }) export default router
修改 src/main.js
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')
修改src/App.vue
<script setup>
</script>
<template>
<RouterView/>
</template>
此时界面的预览效果如下:
将提前准备好的资源放入assets目录:
修改src/main.js,引入静态资源:
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
import "@/assets/css/common.css"
import "@/assets/font/iconfont.css"
const app = createApp(App)
app.use(router)
app.mount('#app')
参考文档:https://vant-ui.github.io/vant/#/zh-CN/quickstart
安装:
pnpm i vant
安装按需引入依赖:
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
修改 vite.config.js
import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import path from "path" import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import {VantResolver} from '@vant/auto-import-resolver'; // https://vitejs.dev/config/ export default defineConfig({ server: { open: true, port: 8088, }, plugins: [ vue(), AutoImport({ resolvers: [VantResolver()], }), Components({ resolvers: [VantResolver()], }), ], resolve: { alias: { "@": path.resolve(__dirname, "src"), } } })
修改src/page/home/index.vue,使用组件和API。注意,这里无论是组件还是API,都不需要我们手动引入,我们配置了自动导入以后,vite会帮我们自动导入。
<script setup>
showToast('No need to import showToast');
</script>
<template>
home
<van-button type="primary"/>
</template>
<style scoped>
</style>
此时预览效果如下:
四个页面,对应四个底部导航:
然后添加layout用于存放布局组件,添加底部导航组件:
修改 src/router/index.js,配置路由:
import { createWebHashHistory, createRouter } from 'vue-router' const routes = [ { path: "/", component: () => import("@/page/home/index.vue") }, { path: "/community", component: () => import("@/page/community/index.vue") }, { path: "/welfare", component: () => import("@/page/welfare/index.vue") }, { path: "/me", component: () => import("@/page/me/index.vue") }, ] const router = createRouter({ history: createWebHashHistory(), routes, }) export default router
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。