0


uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建

    因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个搭配技术还比较新吧,好像是去年12月份完善的技术),如果按照网上的vue-cli + vant的方法配置DCloud官网中提供的uni-app的项目似乎并不可行(满屏的bug)uni-app官网![](https://img-blog.csdnimg.cn/29f33cad31eb4929bf77df6a7b4bec35.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAeGlodWFuZzIwMDA=,size_20,color_FFFFFF,t_70,g_se,x_16),鉴于对Vant的热爱,经过本人不懈努力了2周后,终于成功的适配了!

下面就和各位分享一下如何uni-app + (Vite/Vue3) + vant UI按需引入使用到项目当中吧!


一、下载uni-app Vue3/Vite 模板

    这一步很简单,就不展开来说了,只需要在使用cmd cd到你的文件夹(前提是装好node.js),这里我使用的是JS版本,当然,如果你们网络不好,也可以直接去官网中gitee下载。
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

由于使用HbuilderX写uniapp比较方便,所以下面的演示将使用HBX向各位演示。

     将文件夹拖进来,注意,一定要前面的文件夹表示变成“U”,才行。这里你们直接下载的话是没有node_modules文件夹的,所以才引出我们的下一步。

二、搭建项目环境与下载Vant

    第一步,我们需要安装开发环境需要的依赖包,输入命令
npm install
    安装完成以后,不出意外的话会弹出一堆的Warning,这个是环境版本的警告而已,不用怕。按照提示输入命令行
npm audit fix --force
    检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖,而不必再自己进行跟踪和修复。

    然后,我们按照Vant官网上下载Vant,我们这里下载Vue 3
# Vue 3 项目,安装最新版 Vant
npm i vant

# Vue 2 项目,安装 Vant 2
npm i vant@latest-v2
    接着,在 vite 项目中按需引入组件,我们需要安装一个插件, vite-plugin-style-import 。输入命令行(这里推荐按照官方的要求下载1.4.1版本,因为下载最新的2.0.0在写法上会和之前的有所不同,还可能导致兼容性的问题)
# 通过 npm 安装
npm i [email protected] -D

# 通过 yarn 安装
yarn add [email protected] -D

# 通过 pnpm 安装
pnpm add [email protected] -D
    安装好后,我们这里需要做一个修改。找到node_modules里面,vuex文件夹,找到里面的package.json,

                                     ![](https://img-blog.csdnimg.cn/448e87ee754e433cb54335e7bf874354.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56uv5pyo54aZYA==,size_12,color_FFFFFF,t_70,g_se,x_16)

大约第十二行这里改成(改完后记得保存),这个是因为版本迭代,不改的话就会报写法规范的错误。

    "./": "./*"

     然后就是重点了!

    这里我们结合使用的uni-app + vite而不是一般的vue_cli + vite项目,所以,这里我们需要在vite.config.js不能仅仅按照Vant上面的直接粘贴(会导致组件没办法使用,不兼容而报错)。所以要按照下面这样写(使用官方给出的UI引入插件)。
import { defineConfig } from "vite";
import uni from '@dcloudio/vite-plugin-uni'
import styleImport, { VantResolve } from "vite-plugin-style-import";
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
});

然后,咱们的配置就完成了!

三、在页面中使用Vant组件

    这里就可以按照Vant文档中的几种方法进行配置,我这里就不作展开了。这里我使用的是<script setup>的方法。<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。在 <script setup>  中可以直接使用 Vant 组件,不需要进行组件注册(因为比较简单,所以我用了这个,但是不好的地方是在于他只能使用给定的组件名),下面贴出测试代码和运行结果。
<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <Button type="primary">主要按钮</Button>
    <Button type="success">成功按钮</Button>
    <Button type="default">默认按钮</Button>
    <Button type="warning">警告按钮</Button>
    <Button type="danger">危险按钮</Button>
  </view>
</template>

<script setup>
  import { Button } from 'vant';
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>

PS:建议在运行代码时使用命令行的方式运行代码,而不是在HBX中使用运行到浏览器这个选项,因为会出现这种奇奇怪怪的ESC的符号,直接点击链接也是无效的。

举个栗子,比如说我要跑到h5里面,如下图这样做就好了


这就是本人经过实践出来的经验,如果有问题欢迎各位提出指正!


本文转载自: https://blog.csdn.net/xihuang2000/article/details/123752713
版权归原作者 端木熙` 所有, 如有侵权,请联系我们删除。

“uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建”的评论:

还没有评论