vue+mpvue+vant-weapp搭建小程序开发环境，以及打包发布小程序

最新推荐文章于 2024-06-09 15:43:02 发布
置顶 最新推荐文章于 2024-06-09 15:43:02 发布
阅读量2.7k 收藏 17
点赞数 3
分类专栏： 小程序 vue、react|、angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46540977/article/details/104812315
版权

vue+mpvue+vant-weapp搭建小程序开发环境，以及打包发布小程序

背景

最近因为工作的原因，需要用到小程序。由于本人使用vue较多，so,花了半天时间调研”以vue方式开发小程序的环境搭建“才有了这篇文章。废话不多说，下面上干货

vue环境搭建

  1. 安装node：进入node官网下载与系统匹配的安装包完成安装
  2. 安装vue：查看官网教程完成安装

mpvue项目的创建

  1. 查看mpvue官方文档教程完成项目的创建在这里插入图片描述

  2. 成功创建后，项目目录结构如下在这里插入图片描述
    src为编码文件夹，正式我们工作的地方。
    static为资源文件夹。

  3. 在项目根目录下运行命令”npm run dev“，会生成一个dist目录

最低0.47元/天 解锁文章
离开地球表面*
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
mpvue使用vant Weapp运行npm run build命令打包后失效
weixin_30387423的博客
01-10 316
　　最近在使用mpvue开发微信小程序，在开发过程中使用有赞的小程序ui框架—— vant Weapp ，至于如何使用在我个人博客中有一篇关于如何使用vant Weapp ，需要的同学请点进这里自行查看。 　　使用过mpvue框架开发过小程序的同学都应该知道，通过mpvue开发的小程序需要通过npm run dev命令才能在微信开发工具中调试小程序，按照我那篇使用vant Weapp的博客说明，...
【笔记】实战mpvue2.0多端小程序框架——原生小程序 API 调用与多端小程序发布
程序边界
05-16 1440
文章目录一、支付宝小程序源码运行1.开发者工具下载2.获取openId(1)生成公钥和私钥(2)填入公钥信息(3)服务端 SDK(4)Node.js 版本开发3.获取用户信息4.用户授权5.API 改造二、支付宝小程序用户授权三、支付宝小程序获取OpenId四、支付宝小程序组件定制开发 支付宝小程序开发指南 | 「小慕读书」官网 一、支付宝小程序源码运行 1.开发者工具下载 下载 - 支付宝开放平台 2.获取openId (1)生成公钥和私钥 开发 openId 获取接口需要生成公钥和私钥，查看：技
UniApp+Vue3使用Vant-微信小程序组件
最新发布
qq_45623072的博客
06-09 555
在page.json。
mpvue开发小程序之项目搭建
gis_sss的博客
06-21 197
一、查看mpvue的文档地址如下 http://mpvue.com/mpvue/ 二、执行下边的命令进行项目创建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project 三、安装依赖和...
mpvue框架开发微信小程序步骤
qq_43145310的博客
02-03 182
一、环境需求 node环境，vue-cli脚手架，微信小程序开发工具 二、安装 node node官网 进入官网下载，直接安装即可。安装后打开cmd，运行查看版本命令。如下图所示： vue-cli脚手架 全局安装vue-cli npm install vue-cli -g 安装完毕后，运行查看版本，如下图所示： 微信小程序开发工具 微信小程序官网下载地址 点击进入微信公众平台官网进行下载即可 三、使用脚手架创建项目 蓝色字体部分要自己填写。 四、启动项目 cd 到项目根目录（
如何使用框架进行微信小程序开发(详细版！)
weixin_44582077的博客
01-11 3034
一、mpVue(Vue in Mini Program) 1.1 简介 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架 2.融合了原生小程序和Vue.js的特点 3.可完全组件化开发 1.2 特点 1.组件化开发 2.完成的Vue.js开发体验(前提是熟悉Vue) 3.可使用Vuex管理状态 4.Webpack构建项目 5.最终H5转换工具将项目编译成小程序识别的文件 1.3 初始化项目 1.npm install vue-cli -g 下载vue脚手架 2.vue init mp
mpvue+Vant-Weapp 微信小程序
ZcBob的博客
09-04 472
一丶vant-weapp植入方法 1. npm/cnpm 安装 或者 直接下载git下载 2. 将文件中的dist内容复制到项目static/新建vant下。 3. src/app.json中可逐个注入，然后在对应文件使用就行。 二丶每一个页面对应一个pages下面的文件下； pages/页面文件下：包含main.js(基本通用无改动) index.vue main.jso...
vant-weapp-dev.zip可直接用于小程序及APP移动端
11-23
Vant Weapp Dev 是一个专为微信小程序和移动端APP开发设计的组件库，基于Vant UI框架，并且兼容Vue.js。这个压缩包“vant-weapp-dev.zip”包含了所有必要的资源和代码，允许开发者快速构建用户界面，提升开发效率。...
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
10-18
在本文中，我们将深入探讨如何使用微信小程序搭建一个基于mpvue、mpvue-weui和fly.js的应用。首先，让我们了解一下这三个关键组件： 1. **微信小程序框架：mpvue** mpvue 是一个基于 Vue.js 的开放源代码框架，专...
微信小程序+云开发+mpvue+uni-app跨平台-6天资料
12-22
8. **测试与发布**：学习小程序的调试技巧，理解审核流程，学会如何打包发布小程序，使其顺利上线。 通过本课程的学习，你不仅能够独立开发微信小程序，还能进一步拓展到其他平台，成为一名具备跨平台开发能力的...
vue-mpvue-ChatRobot聊天机器人vue-mpvue-ChatRobot-master（小程序）
04-10
Vue.js、MPVue 和 小程序是现代前端开发中的热门技术栈，而“vue-mpvue-ChatRobot聊天机器人vue-mpvue-ChatRobot-master”项目则是将这三者结合，构建了一个支持移动端和小程序的聊天机器人应用。下面将详细探讨这些...
mpvue将vue项目转换为小程序
明月如霜丶
02-28 6956
一、 mpvue简介 mpvue:是由 美团点评团队出品的小程序开 发的一款基于 vue的框架， 从整个 Vue的核心代码上经过二次开发而形成的一个框架，相当于是给Vue本身赋能，增加了开发微信小程序的能力。 使用 mpvue开发小程序，你将在小程序技术体系的基础上获取到这样一些能力： l 彻底的组件化开发能力：提高代码 l 完整的 Vue.js 开发体验 l 方便的 Vuex 数据管理方案：方便...
微信小程序 基础 - 17 （vant组件库的使用）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-07 231
安装vant组件库 步骤一 通过 npm 安装 进入项目根目录，执行以下命令，初始化npm，安装vant： cd xxxx #进入文件夹目录 cloudnpm init # 一路回车 初始化npm 将会生成package.json npm i @vant/weapp -S --production # 安装vant 步骤二 修改 app.json 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上...
记一次基于mpvue的小程序开发及上线实战
weixin_34236869的博客
04-20 213
小程序名称：一起打车吧 项目地址：客户端：https://github.com/jrainlau/t... 服务端：https://github.com/jrainlau/t... 小程序二维码： 经过为期两个晚上下班时间的努力，终于把我第一个小程序开发完成并发布上线了。整个过程还算顺利，由于使用了mpvue方案进行开发，故可以享...
mpvue 开发微信小程序
小猿猪哥的博客
06-15 454
最近一段时间公司在做一个直播的微信小程序。由于是两个部门的前端一起合作开发这个小程序。项目框架也是之前他们搭建的，所以我们这边就只能依着他们的继续开发下去了。框架选型是mpvue。其实早在18年就知道这个mpvue也听之前使用的同事说过这个。现在是自己亲自使用，个人感觉真没必要使用这个开发小程序。理由如下： 都会vue了，再上手小程序其实很简单了。之前17年初，我就是这样开发可好几个小程序，现在小程序API、组件、开发工具很强大了，没必要在使用其他的。 开发效率，可能还低。可能在我这就是这样的。在vsco
vue 打包发布
热门推荐
小武的博客
06-14 1万+
1. 打包之前需要先修改config下的index.js文件中build，assetsPublicPath:'./' build: { //index.html路径 index: path.resolve(__dirname, '../dist/project/index.html'), //静态文件的路径 assetsRoot: pat...
小程序mpvue图片绘制水印_开发笔记：使用 mpvue 开发斗图小程序
weixin_39797686的博客
12-20 123
之前用过wepy框架写了个小程序GitHub - yshkk/shanbay-mina: 基于 wepy 框架的 “扇贝阅读” 微信小程序，感觉写法上类似 vue，但不那么彻底。现在美团点评发布的mpvue支持开发者可以用 vue 的语法开发微信小程序，正好有强需求需要一个斗图小程序，所以就尝试了下。扫码体验截图开发细节和坑使用iView Weapp组件库相关代码 pages/in...
mpvue官网
weixin_39629380的博客
04-10 8517
http://mpvue.com/mpvue/
微信小程序vant weapp源码
05-02
vant weapp是一个基于微信小程序的组件库，旨在为开发者提供高质量、易用的UI组件，包括常见的表单、列表、弹窗、导航等组件。该组件库源码开放，提供给开发者自由参考、学习和使用。 vant weapp的源码包括两个部分，一个是组件库的JS代码，另一个是组件库的CSS代码。在使用vant weapp时，需要将这两部分的代码导入到小程序的相应目录下，并在页面中引入相关组件的JS和CSS文件。引入后，就可以使用vant weapp提供的组件和功能了。 让我们来看一下vant weapp的组件库源码具体包含哪些内容。首先，它提供了一系列常见的UI组件，比如Button按钮、Card卡片、Cell单元格、Icon图标、Switch开关、Tab标签页等等。这些组件不仅外观精美，而且封装了常见的逻辑，使用者只需要传入相应的配置即可快速使用。 另外，vant weapp也提供了一些工具类组件，如Toast轻提示、Dialog弹窗、Loading加载等待等。这些组件在实际开发中，也是经常使用的，通常需要在各种场景下进行调用。 总之，vant weapp的源码为我们提供了高质量的微信小程序UI组件库，并且还提供了丰富的工具类组件，可以快速地搭建小程序界面并实现各种交互。无论是入门级开发者还是高级开发者，都可以从中受益良多，提升自己的小程序开发技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值