cli 搭建uni-app+vant 微信小程序并发布

最新推荐文章于 2024-04-27 19:29:14 发布
最新推荐文章于 2024-04-27 19:29:14 发布
阅读量142 收藏
点赞数
分类专栏： uni-app 文章标签： uni-app 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43867229/article/details/134336499
版权

执行
在manifest.json 中加入你的appid在这里插入图片描述

  • 执行打包命令
npm run build:mp-weixin

  • 发现报错了 ～ 没有找到目录
    在这里插入图片描述
    -排查问题重新更改目录并把本身在wxcomponents里的组件放到src里面。
    在这里插入图片描述

  • 再次执行打包命令

npm run build:mp-weixin

出现效果了 目录也有了
在这里插入图片描述请添加图片描述

手机上也是正常的～

小王学前端️
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用uni-app搭建微信小程序
Stephy_Yy
06-21 2824
0 问题待解决 import { } 与否 为什么要封装 对齐问题 每次重启项目，sitemap就会消失 动态修改标题失效 图片问题多多 ：高度自适应 改成image固定高度，mode：aspectFill 微信小程序文档 b站视频链接 后端接口文档 一、知识点 uni-app 是一个使用 Vue.js语法来开发所有前端应用的框架 项目技术栈：js+vue+微信小程序+uni-app 750rpx = 屏幕宽度（微信小程序） 100vw = 屏幕宽度（H5） 100vh = 屏幕高度（H5） 微信小程
uniapp使用vant
YUE
08-11 1万+
uniapp使用vant
UniApp小程序使用vant引入vant weapp
weixin_53221528的博客
12-29 1555
UniApp小程序vant weapp
uniapp使用vant-weapp（微信小程序）
最新发布
weixin_68882321的博客
04-27 714
3. 在项目跟目录创建 wxcomponents 文件夹目录，把复制的 dist 文件夹直接放里面就行。4.在 uniapp 官网里 查找框架里的 easycom 组件模式。2. 解压下载的文件包，在复制 dist 文件夹里的文件。（可以改dist的文件名，叫vant）1. 打开GitHub下载文件包。5.从官网里复制，修改路径。
关于在uniapp写微信小程序使用vant方法
m0_69896158的博客
03-12 893
关于在uniapp写小程序使用vant方法(真实有效)
如何用uni-app+vue3+vant开发微信小程序
weixin_69370222的博客
04-27 4140
uni-app之前一直只支持vue2语法，vue3 + ts今天主要讲讲如何使用vue3+vant。
uniapp怎么引入vant
qq_52845451的博客
03-15 1375
uniapp怎么引入vant
mpvue+vant app搭建微信小程序的方法步骤
10-17
主要介绍了mpvue+vant app搭建微信小程序的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
安卓毕业设计app项目源码6-shop-vue:vue-cli+vue-router+vuex+axios+vue-axios+vant(UI
06-06
安卓毕业设计app项目源码6 shop-vue移动端商城APP 项目概要 本项目用到的技术栈： vue-cli + vue-router + vuex + axios + vue-axios + vant( UI ) 如何在本地运行本项目 git clone git@github....
uni-app小程序使用vant
LingHuzh的博客
11-02 938
步骤二：在根目录下创建“wxcomponents”文件夹 步骤三：找到依赖node_modules/@vant/weapp/dist，复制dist文件 步骤六：使用 end~~~如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！
如何在uni-app中使用vant组件？
xfWgaoqiang的博客
05-31 3711
在我们刚才新建的wxcomponents 目录下新建一个 @vant 的文件夹，建立目录方法就和步骤三一样，只不过这一次我们要在 wxcomponents 目录下建立 子目录 @vant。再多提一嘴，vant组件是配合原生小程序使用的，所以有些地方，比如data数据渲染，我们不能直接照抄，一般用vue的思路就可以解决啦。那我们这样创建文件夹，和它嵌套的路径一样，是不是后面使用复制vant 提供的路径就OK了？填写项目名称，选择模板，vue技术栈，…最后说明一下前面文件夹的命名方式的由来。
uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)
热门推荐
今天,你学习了吗?
01-19 4万+
uniapp开发小程序/h5 ,使用分包,vuex,消息订阅,登录逻辑,自动注册组件等
uniapp 微信小程序引入vant weappp
Aimee的博客
11-05 2470
传送门：vant weapp文档地址 uniapp文档地址 前提：已经有uniapp项目 第一步： 新建存放组件的目录 根目录下创建 wxcomponents wxcomponents下新建vant目录 第二步： 项目中引入vant-weapp组件 在vant-weapp的GitHub Releases版块下载最新的zip包 解压下载文件,将dist目录拷贝到刚才创建vant目录中 第三步：具体组件引入 将绝大多数界面需要使用的组件在pages.json的globalStyle中引入，如下图所示 若仅是单
uniapp使用第三方UI库（Vant-weapp）流程
奋斗到天明~
01-03 2689
最近撸了一个个人小程序项目，前端到后端都是本人所写，苦逼。。。废话不多说，直接给大家说一下uniapp使用vant步骤！！！ 一、创建目录 在项目根目录中创建wxcomponents目录（注：与components同路径） 在wxcomponents目录中创建vant目录 在vant-weapp的GitHub Releases版块下载最新的zip包：https://github.com/youzan/vant-weapp/releases 把下载好的zip包中的dist文件目录放到vant目录下。 效.
如何在uniapp中使用vant框架
m0_68095466的博客
10-09 6199
在进行uiapp项目的开发时，有时uniapp自带的组件无法满足我们的开发需求，而需要引用第三方的框架，比如vant。那么如何在uniapp中使用vant呢？
uniapp项目引用vant weapp组件库及icon字体图标库报错
qq_53841687的博客
09-23 3323
在HbuilderX里点击文件，新建项目，自定义项目名称选择默认模板。
从0搭建，在uniapp中使用vant组件
Gjing_123的博客
02-06 892
在uniapp中使用vant（手把手教搭建，从0开始）
uniapp项目中引入vant
屠龙石头的专栏
02-09 6021
Hbuilder下UniAPP中实现小程序、H5的vant框架引入。
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错
weixin_44730534的博客
11-24 1949
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错 “usingComponents”: { “van-button”: “/wxcomponents/vant/button/index”, “van-cell”: “/wxcomponents/vant/cell/index”, “van-cell-group”: “/wxcomponents/vant/cell-group/index”, “van-icon”: “/wxcomponents/vant/icon/index”,
uni-app小程序使用vant组件
09-13
uni-app是一个跨平台的开发框架，可以用于开发小程序、H5、App等多端应用。而vant是一个基于Vue.js的移动端组件库，提供了丰富的UI组件和交互效果。 要在uni-app小程序中使用vant组件，可以按照以下步骤操作： 1. 在uni-app项目中安装vant组件库。可以通过命令行执行以下指令安装： ``` npm install vant ``` 2. 在uni-app项目的`main.js`文件中引入vant组件库： ```javascript import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ``` 3. 在需要使用vant组件的页面中，按需引入所需的组件。例如，在某个页面的`<script>`标签中可以这样引入Button组件： ```javascript import { Button } from 'vant'; export default { components: { [Button.name]: Button } } ``` 4. 在页面的模板中，使用引入的vant组件即可。例如，可以在模板中使用Button组件： ```html <template> <div> <van-button type="primary">按钮</van-button> </div> </template> ``` 通过以上步骤，你就可以在uni-app小程序中使用vant组件了。当然，除了Button组件外，你还可以按照同样的方式引入和使用vant提供的其他组件。希望对你有帮助！如有更多问题，请继续提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值