Vite脚手架+Vant组件库初始化前端项目

我要200

已于 2024-06-29 08:57:03 修改

阅读量773

点赞数 5

分类专栏：前端伙伴匹配系统文章标签：前端

于 2024-06-28 22:18:56 首次发布

本文链接：https://blog.csdn.net/m0_73966521/article/details/140053883

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

伙伴匹配系统

7 篇文章 0 订阅

订阅专栏

脚手架概念：

在前端开发中，脚手架（Scaffold）是指一个用于快速搭建项目基础结构的工具或模板。脚手架包含了项目所需的基本文件结构、配置文件、依赖管理等内容，使开发者能够更快速地开始项目开发，而不必从头开始搭建整个项目结构。

总结起来就是，我们准备开始搭建项目的时候，不需要自己从0到1全部自己写，我们可以去网上拉写好的脚手架下来。

Vite脚手架：

Vite 是一个由 Vue.js 核心团队开发的工具，旨在配合 Vue 3 进行现代化的前端开发。因此，Vite 和 Vue 3 之间存在密切的关系。Vite 可以被视为一个优化了的构建工具，特别针对 Vue 3 的开发。

很多命令或者快速入门都可以在Vite官网上看：

Vite官网：开始 | Vite 官方中文文档 (vitejs.cn)

一：创建Vite项目：

新建一个项目文件夹，并打开cmd（在项目目录中直接打开），运行npm create vite

然后就会获得这样一个项目，在webstorm打开或者vscode。

打开项目之后还要运行一下npm install

运行之后的页面：

二：进行Vant组件库的初始化：

官网中有一个快速开始：

照着做最好

Vant官网：快速上手 - Vant 4

这种入门程序最好还是照着官网做，我以前喜欢去网上找教程，不过网上教程的问题就是，Vant一直会更新，所以，有些教程已经不适用了，还是得紧跟官方文档。

1. 安装插件：

npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

2. 配置插件：

如果是基于 Vite 的项目，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

3：使用组件：

完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件, @vant/auto-import-resolver 会自动引入对应的组件样式。

三：了解Vite项目中的一些文件：

1：App.vue：用于定义应用的整体结构和布局。

App.vue 文件通常包含了应用的根组件，其中会定义页面的整体结构、布局、样式以及各个组件的交互，

说白了就是前端页面展示。

2：main.ts 这个文件是应用的入口文件，用于初始化应用并启动应用逻辑。

3：package.json 是一个用来描述 Node.js 项目信息的配置文件，通常放置在项目的根目录下。这个文件包含了项目的元数据，如项目名称、版本号、依赖项、脚本命令等信息。

其实也可以和springboot中的pom.xml文件一起理解

4：layouts 文件夹通常用来存放整个应用程序中的布局组件。布局组件定义了整个应用程序的基本布局结构，包括顶部导航、侧边栏、页脚等元素

四：使用Vant组件来修改Vite项目：

1：新建一个layouts文件夹来存放整个应用程序中的布局

2：去Vant官网直接找我们需要的组件

以这个Tabbar举例

我们需要这个标签栏，直接ctrl+c复制到刚刚创建的BasicLayouts.vue中



<template>
  <van-nav-bar
      title="标题"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
  </van-nav-bar>
  <div id="content">
    <template v-if="active === 'index'">
      <Index />
    </template>
    <template v-if="active === 'team'">
      <Team />
    </template>

  </div>
  <van-tabbar v-model="active" @change="onChange">
    <van-tabbar-item icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item icon="search" name="team">队伍</van-tabbar-item>
    <van-tabbar-item icon="friends-o" name="user">个人</van-tabbar-item>
  </van-tabbar>

</template>
<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import Index from "../pages/Index.vue";
import Team from "../pages/Team.vue";
    const onClickLeft = () => alert("左");
    const onClickRight = () => alert("右");
    const active = ref("index");
    const onChange = (index) => showToast(`标签 ${index}`);
</script>
<style scoped>

</style>

3：在Vue.ts中加入 <BasicLayout/>

<script setup lang="ts">
import BasicLayout from "./layouts/BasicLayout.vue";
</script>

<template>
  <BasicLayout/>
</template>

<style scoped>

</style>

在main.ts中不需要去改动，会自动加入

效果：