vite5+vue3开发阅读APP实战笔记20240725

目前界面长成这样：

配置别名

修改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')

引入vant

参考文档：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>

此时预览效果如下：

划分页面结构

四个页面，对应四个底部导航：

• me：我的
• home：首页
• welfare：福利
• community：社区

然后添加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