因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个搭配技术还比较新吧,好像是去年12月份完善的技术),如果按照网上的vue-cli + vant的方法配置DCloud官网中提供的uni-app的项目似乎并不可行(满屏的bug)uni-app官网,鉴于对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 vite-plugin-style-import@1.4.1 -D
# 通过 yarn 安装
yarn add vite-plugin-style-import@1.4.1 -D
# 通过 pnpm 安装
pnpm add vite-plugin-style-import@1.4.1 -D
安装好后,我们这里需要做一个修改。找到node_modules里面,vuex文件夹,找到里面的package.json,
大约第十二行这里改成(改完后记得保存),这个是因为版本迭代,不改的话就会报写法规范的错误。
"./": "./*"
然后就是重点了!
这里我们结合使用的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')
}
}
});
然后,咱们的配置就完成了!
PS:如果要使用最新版的vite-plugin-style-import(2.0.0+)就按照一下步骤配置
npm i vite-plugin-style-import
因为插件的使用了 consola
包,所以这里我们也要给它装上
npm i consola -D
相应的,对应的uni-app中vite.config.js也要做出一定的修改(在2.0版本使用的就是createStyleImportPlugin而不是原来的styleImport
)
import {
defineConfig
} from "vite";
import {
createStyleImportPlugin,
VantResolve
} from 'vite-plugin-style-import';
import uni from '@dcloudio/vite-plugin-uni'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
uni(),
createStyleImportPlugin({
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>
四、运行代码
下面贴出测试代码和运行结果。(以h5为例)
f12的结果
PS:建议在运行代码时使用命令行的方式运行代码,而不是在HBX中使用运行到浏览器这个选项,因为会出现这种奇奇怪怪的ESC的符号,直接点击链接也是无效的。
举个栗子,比如说我要跑到h5里面,如下图这样做就好了
这就是本人经过实践出来的经验,如果有问题欢迎各位提出指正!文章来源:https://www.toymoban.com/news/detail-407852.html
PS:不建议将vant4用于小程序开发,存在兼容性问题,如果要是用的话还是用vant-weapp吧文章来源地址https://www.toymoban.com/news/detail-407852.html
到了这里,关于uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!