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

目前界面长成这样:

配置别名

修改vite.config.js

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"),
        }
    }
})

这里配置别名的核心代码是:

js 复制代码
"@": path.resolve(__dirname, "src"),

配置首页

创建 src/page/home/index.vue

html 复制代码
<script setup>

</script>

<template>
home
</template>

<style scoped>

</style>

修改src/router/index.js,这里主要是配置首页的路由:

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

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

html 复制代码
<script setup>
</script>

<template>
  <RouterView/>
</template>

此时界面的预览效果如下:

引入外部资源

将提前准备好的资源放入assets目录:

修改src/main.js,引入静态资源:

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

安装:

bash 复制代码
pnpm i vant

安装按需引入依赖:

bash 复制代码
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

修改 vite.config.js

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会帮我们自动导入。

html 复制代码
<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,配置路由:

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
相关推荐
HuashuiMu花水木40 分钟前
PyTorch笔记1----------Tensor(张量):基本概念、创建、属性、算数运算
人工智能·pytorch·笔记
笑衬人心。3 小时前
Ubuntu 22.04 修改默认 Python 版本为 Python3 笔记
笔记·python·ubuntu
金色光环4 小时前
【Modbus学习笔记】stm32实现Modbus
笔记·stm32·学习
zyxzyx6665 小时前
Flyway 介绍以及与 Spring Boot 集成指南
spring boot·笔记
西岭千秋雪_6 小时前
Redis性能优化
数据库·redis·笔记·学习·缓存·性能优化
HuashuiMu花水木7 小时前
Matplotlib笔记4----------图像处理
图像处理·笔记·matplotlib
DES 仿真实践家8 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
IMPYLH14 小时前
Python 的内置函数 reversed
笔记·python
ysa05103017 小时前
数论基础知识和模板
数据结构·c++·笔记·算法
今天背单词了吗98018 小时前
算法学习笔记:7.Dijkstra 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·开发语言·数据结构·笔记·算法