uni app webview（【uni-app导入vant】）
导读：一、为什么要写这篇文章 相信有很多人在进行小程序转为uni-app的时候都会遇到转换后vant组件不能用的问题，为了解决这个问题本人打算写这篇文件来记录转换后导入vant的方法。...
一 、为什么要写这篇文章
相信有很多人在进行小程序转为uni-app的时候都会遇到转换后vant组件不能用的问题 ，为了解决这个问题本人打算写这篇文件来记录转换后导入vant的方法 。
二 、 安装vant
运行命令安装vant到uni-app项目中 # 首先进入到项目的根目录中 # 此命令安装的是支持Vue2的vant2.X ，一定要注意vant的版本 ，目前用2是不会出问题的 npm i vant@latest-v2 -S 安装成功后可以在package.json中看到已经加入该依赖
我们可以在根目录中看到下面的文件结构（之后我们使用的将是这个红色框中的目录中）
三 、 进行全局导入Vant组件
在main.js中进行挂载Vant组件 ，主看带有编号的两步
import App from ./App // 1. 导入Vant组件 ，这里的‘vant’就是我们上面新导入的vant的目录 import Vant from ./node_modules/vant/lib/vant; // #ifndef VUE3 import Vue from vue Vue.config.productionTip = false App.mpType = app const app = new Vue({ ...App }) // 2. 将Vant组件挂载到Vue上 Vue.use(Vant); app.$mount() // #endif // #ifdef VUE3 import { createSSRApp } from vue export function createApp() { const app = createSSRApp(App) return { app } } // #endif四 、 导入Vant全局公共样式
在App.vue中进行导入
<script> export default { onLaunch: function() { console.log(App Launch) }, onShow: function() { console.log(App Show) }, onHide: function() { console.log(App Hide) } } </script> <style> /* 每个页面公共css ，这个如果不引入的话会出现vant组件可以使用但是没有样式（注意后缀一定要带） */ @import @/node_modules/vant/lib/index.css; </style>五 、 在页面中使用Vant组件
<template> <view class="content"> <!-- <image class="logo" src="/static/logo.png"></image> --> <!-- <view class="text-area"> <text class="title">{{title}}</text> </view> --> <van-button type="warning">按钮</van-button> <van-dialog v-model="show" title="弹窗标题 " > 我是弹窗 </van-dialog> </view> </template> <script> export default { data() { return { title: Hello, show: true, } }, onLoad() { }, methods: { } } </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>启动项目查看到下面的样式说明导入Vant成功
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！