当前位置:   article > 正文

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

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

"@": path.resolve(__dirname, "src"),
  • 1

配置首页

创建 src/page/home/index.vue

<script setup>

</script>

<template>
home
</template>

<style scoped>

</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

修改src/App.vue

<script setup>
</script>

<template>
  <RouterView/>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

此时界面的预览效果如下:
在这里插入图片描述

引入外部资源

将提前准备好的资源放入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')

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

引入vant

参考文档:https://vant-ui.github.io/vant/#/zh-CN/quickstart

安装:

pnpm i vant
  • 1

在这里插入图片描述

安装按需引入依赖:

pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
  • 1

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

此时预览效果如下:
在这里插入图片描述

划分页面结构

在这里插入图片描述

四个页面,对应四个底部导航:

  • 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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/895100
推荐阅读
相关标签
  

闽ICP备14008679号