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
相关推荐
芜狄18 小时前
UCOSIII移植——学习笔记1
笔记·嵌入式硬件·学习·stm32f103rct6·ucosiii实时操作系统
所愿ღ18 小时前
JavaWeb-Servlet总结及JSP
java·笔记·servlet
笨鸟笃行19 小时前
人工智能训练师三级备考笔记
笔记
Ro Jace19 小时前
文献阅读笔记:JAPCC2018年秋冬刊第27期期刊
笔记
新子y20 小时前
【小白笔记】符号链接
笔记
智者知已应修善业20 小时前
【矩阵找最大小所在位置】2022-11-13
c语言·c++·经验分享·笔记·算法·矩阵
SccTsAxR21 小时前
[C语言]常见排序算法①
c语言·开发语言·经验分享·笔记·其他·排序算法
智者知已应修善业1 天前
【51单片机单按键控制2个LED循环闪烁】2022-12-7
c语言·经验分享·笔记·嵌入式硬件·51单片机
所愿ღ1 天前
JavaWeb-Session和ServletContext
java·笔记·servlet
程序员东岸1 天前
C语言入门指南:字符函数和字符串函数
c语言·笔记·学习·程序人生·算法