傻瓜式简单vue-cli+vant项目搭建

7frog7

已于 2022-03-21 20:37:33 修改

阅读量2.7k

点赞数 2

分类专栏： front-end projects 文章标签： vue vant

于 2022-03-21 19:33:39 首次发布

本文链接：https://blog.csdn.net/weixin_45817880/article/details/123642678

版权

front-end projects 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文适合初学者，介绍如何在Vue项目中使用vant创建底部导航栏，并结合vue-router实现页面间的导航。通过实例演示了 vant 的安装、组件使用，以及vue-router的基本配置，帮助理解前端开发中的组件化和路由概念。

摘要由CSDN通过智能技术生成

如果你和我一样从来没做过前端开发，只能看懂一点点html和css，且几乎完全不懂vue.js 这篇文章可以给你补充一点最基本的概念，还有一点最基础的写法。
~~写前端代码出不来效果真是非常折磨人的事情~~
这里用一个简单的用vant做的界面为例
在这里插入图片描述

0.准备部分
0.1 vant 安装
传送门
要注意如果用vue-cli 还需要在 babel.config.js 添加东西
0.2 怎么使用vue项目？
不需要额外做一个html文件。直接npm run serve即可

1.如何开始？
在这里插入图片描述

假定已经建立了项目此时你npm run serve可以得到vue的helloword
我们需要把组件在App.vue里展现。
在component里建立tabBar组件
在这里插入图片描述

首先在vant文档里找个底部导航栏

传送门
首先在main.js里注册

import { createApp } from 'vue';
import { Tabbar, TabbarItem } from 'vant';

const app = createApp();
app.use(Tabbar);
app.use(TabbarItem);
app.mount('#app');

把后面的代码复制到tabBar.vue里
（template对应上半部分 script对应下半部分)

<template>
<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
</template>
<script>
import { ref } from 'vue';

export default {

  setup() {
    const active = ref(0);
    return { active };
  },
};

</script>

<style scoped>

</style>

这样就能得到最基础的底部导航栏了
在这里插入图片描述

然而导航栏还需要有导航的功能这里还需要vue-router
首先要给激活之前标签的route功能
在这里插入图片描述
然后根据导航去的位置在pages里再做若干个页面

vue页面的写法可以类似这样：

<template>
  <img src="@/pages/friends/1.png" width="290" height="235" alt="a"/>
  <tab-bar></tab-bar>
</template>

<script>
import TabBar from "@/components/tabBar/tabBar";
export default {
  name: "f-riends",
  components: {TabBar}
}
</script>

<style scoped>

</style>

然后在main.js布置路由

import friends from "@/pages/friends/friends";
import Home from "@/pages/home/home";
import search from "@/pages/search/search";
import settings from "@/pages/settings/settings";
const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/friends',
            name:'f-riends',
            component: friends
        },
        {
            path:'/home',
            name:'h-ome',
            component: Home
        },
        {
            path:'/search',
            name:'s-earch',
            component: search
        },
        {
            path:'/settings',
            name:'s-ettings',
            component: settings
        }

    ]
})
app.use(router);