使用wepy框架，新建小程序项目

最新推荐文章于 2022-04-22 15:03:05 发布
最新推荐文章于 2022-04-22 15:03:05 发布
阅读量318 收藏
点赞数
分类专栏： 小程序 文章标签： 小程序 wepy vue.js vant wepy引入vant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lb1135909273/article/details/104626873
版权

附：官网快速开始链接（点我直接跳转）

打开命令行
一.全局安装wepy

npm install @wepy/cli -g

查看安装成功

 wepy --help

在这里插入图片描述
说明全局安装成功

二.新建项目

1.执行命令（wepy_test是项目名称，可随意填写）

wepy init standard wepy_test

在这里插入图片描述
新建成功

在这里插入图片描述

2.进入项目

项目目录
在这里插入图片描述

安装依赖

cnpm install

安装成功之后就可以使用

npm run dev

启动并编译项目了

三.查看项目

使用开发者工具导入新建项目的根目录，即可预览效果。

在这里插入图片描述

在这里插入图片描述

项目目录结构

在这里插入图片描述

学过vue的都明白这个目录结构跟vue-cli是一样的

新增成功

四.引入vant组件

附：vant官网请点这里

执行命令

 cnpm i @vant/weapp -S --production

在这里插入图片描述

将node_modules下的vant_weapp中的dist文件夹考入components文件夹中

在这里插入图片描述

在这里插入图片描述

usingComponents: {
  'van-button': '../components/vant/button/index'
}

随便引入一个组件试试，是否成功

在这里插入图片描述

成功显示，引入成功

李小斌96
关注
专栏目录
uniapp之uni-starter小程序多端研发框架搭建与项目实践
JINGWHALE
06-23 1140
随着移动互联网的飞速发展，无数移动APP琳琅满目；在移动App的发展的基础上，衍生了小程序、轻应用技术，它随时可用，但又无需安装卸载。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序等多个平台。AIPHD科技文教专注于科技文教，基于uni-app，研发了AIPHD英语、AI智能古诗、AIPHD科技心理等具有独立功能的APP产品矩阵，同时将AIMANT星球作为情感辅助。
使用wepy框架搭建一个小程序项目框架
蒹葭的博客
12-09 867
文章目录一、环境配置1、安装node2、设置淘宝源3、小程序开发必备4、安装vscode5、使用说明二、开始搭建1、前期初始化项目2、安装scss（可不装） 一、环境配置 1、安装node 官网 https://nodejs.org/en/ or http://nodejs.cn/ 查看node版本号： node -v 查看npm版本号：npm -v 2、设置淘宝源 npm in...
Megalo基于Vue的小程序开发框架
08-10
Megalo 是基于 Vue 的小程序开发框架，让开发者可以用 Vue 的开发方式开发小程序应用。Megalo 是为了跨 H5 和小程序两端的应用提供一个高效的解决方案，只需要少量改动即可完成 H5 和小程序之间的代码迁移。
使用wepy框架开发时 创建微信小程序项目
iOS_ZCP的博客
04-30 354
1.首先 在桌面（自己选定目录下）新建一个文件夹，注意需要使用英文名。 2.Cd中 进入到该文件目录下 3.安装 wepy 命令行工具。 npm install wepy-cli -g 4.在开发目录生成开发DEMO。 wepy new myproject 或1.7版本后执行wepy init standard myproject 输入创建的名字、AppID、项目名称、作者等之后，这个时候文件...
wepy框架搭建小程序
平凡之路
03-28 2162
我们都知道，小程序对组件化开发并不友好，腾讯自己的 团队就搞出了一个wepy框架。我们先看下wepy的介绍; 既然说自己是最受欢迎的小程序 框架，我们就来安装使用一下吧; 步骤 ： 1：npm install wepy-cli -d（推荐cnpm。淘宝镜像比较快） 2. wepy new myproject(你会发现这句代码会实现不了你项目的 创建)。因为已经改成了： wp...
用Vue开发小程序的框架
张火火
08-20 1万+
为什么是 Vue.js？这取决于团队技术栈选型，引入新的选型对统一技术栈和提高开发效率相悖，有违开发工具服务业务的初衷。 mpVue 的演进 mpVue 的形成，来源于业务场景和需求，最终方案的确定，经历了三个阶段。 第一阶段：我们实现了一个视图层代码转换工具，旨在提高代码首次开发效率。通过将 H5 视图层代码转换为小程序代码，包括 HTML 标签映射、Vue.js 模板和样式转换，在此目标...
wepy创建小程序
Hing-Zhang的博客
09-25 135
npm install wepy-cli -g wpey init standard myproject 遇到问题解决办法 （1)点击下载 standard（v2.0.x）， 链接：https://pan.baidu.com/s/1sNjL8PemNMLC8fCAtaMkxQ 提取码：lpbv （2）在此目录下cmd打开命令行界面 （3）输入命令wepy init E:/wepy/standard myproject，默认一直enter （4）输入命令cd myproject,进入到新创建的myprojec
基于wepy 框架构建的微信小程序开发的线上电子商城系统
最新发布
06-19
基于wepy 框架构建的微信小程序开发的线上电子商城系统 项目新建步骤： wepy init empty wepyshop 1. 初始化wepy项目 cd wepyshop 2. 进入项目文件夹 npm i 3. 安装 npm 依赖包 wepy build --watch 4. 编译 wepy ...
微信小程序 wepy框架与iview-weapp的用法详解
10-17
在进行小程序开发的过程中，除了了解框架和组件库的使用方法，还需要考虑小程序的性能优化、代码的组织结构、项目的开发和部署流程等多方面的知识。只有这样才能开发出既满足用户需求又性能高效的小程序产品。
微信小程序框架 WePY 开发使用
04-24
本文介绍了如何使用WePY框架来搭建微信小程序的开发环境，并通过创建一个简单的Demo来演示基本的使用方法。WePY通过提供组件化的开发方式，极大地提高了开发效率。希望初学者们能够通过本文快速掌握WePY的基础用法，...
微信小程序开发框架—wepy快速入门
02-24
以下安装都通过npm安装安装wepy命令行工具在开发目录生成开发DEMO开发实时编译项目目录结构使用微信开发者工具新建项目，本地开发选择dist目录。微信开发者工具-->项目-->关闭ES6转ES5。本地项目根目录运行...
megalo：基于Vue的小程序开发框架
02-23
梅加洛 Megalo是基于Vue公司（ Vue@2.6.6 ）的小程序开发框架，让开发者可以用的Vue的开发方式开发小程序应用。Megalo是为了跨H5和小程序两端的应用提供一个高效的解决方案，只需要少量干预即可完成H5和小程序之间的代码迁移。 Megalo目前支持微信小程序，支付宝小程序，百度智能小程序，字节跳动小程序。 配套设施 支持 megalo经公司内部大项目验证，可在你的公司或个人项目中使用 如果你觉得还不错，请点下「star」以表支持 任何技术问题轻微在交流群内讨论 灵感来源 名字启发动画Megalo Box 。项目启发自mpvue 。
mpvue-demo:mpvue-demo,vue小程序框架demo
05-02
mpvue-demo mpvue-demo IT之家小程序版客户端 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 相关依赖 - 集中式页面配置，不再需要重复编辑各页面的 main.js 文件 - 在 mpvue 中使用 vue-router 兼容的路由写法 - xml字符串转换 json 格式，适用于微信小程序 项目模板 使用 mpvue-entry 配置入口
微信小程序-微信小程序框架的Vue版本
08-05
vwx 项目依赖 vue vue-router weui.js weui axios iscroll lodash swiper 使用webpack打包 安装 Npm npm install --save vwx 项目使用 Require the script: import { App } from "vwx"; import pageA from 'pageA.js'; import pageB from 'pageB.js'; App({ pages: [ { path: '/', component: pageA }, { path: '/my', component: pageB } ] }); 运行示例 npm run exp
mpvue-weui：用vue写小程序，基于mpvue框架嵌入weui
02-06
用vue写小程序，使用mpvue框架重写WeUI。 相关说明 该仓库是基于mpvue mpvue构建WeUI ，是一个demo库，没有实现组件化，目前已实现组件化，支持npm安装。 前言 今天早上打开电脑，像往常一样浏览一下github ，看到了一个很不错的框架，没错，就是 。它是基于Vue.js的小程序开发框架，从很大程度上支持Vue.js语法和构建工具体系。什么，小程序可以用vue写了？简直有点不太敢确定，花了看了一下简介，没错，真的可以用vue开发小程序。真的是**限制了我的想象力，明白又该学写了，于是就开始准备利用这个框架写一点项目，感受一下他的魅力（其实是踩坑）。 踩坑文档 微网 由
wepy小程序项目
程序员哆啦A梦，蓝胖子
06-09 627
# 安装（更新） wepy 命令行工具。 cnpm install wepy-cli -g # 安装依赖包 cnpm install # 开发实时编译。 npm run dev WePY开发文档参考 店铺 店铺首页 店铺信息 商品 分类展示 规格展现 购物车 商品详情 会员折扣价 订单 商品下单 订单列表 订单详情 订单评价 订单退款 堂食点餐/外卖点餐 优惠券 我的优惠券 领取优惠券 ...
uniapp + vue3微信小程序开发（1）框架搭建
热门推荐
qq_39404437的博客
04-22 3万+
uniapp + vue3 开发微信小程序
vue 美团框架_基于mpvue的框架开发微信小程序（搭建环境）
weixin_28235889的博客
12-30 880
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_103美团很早就开源了mpvue这个项目，如此看来，美团可不仅仅是一家团购网站，真正的技术驱动型企业，使得我们多了一种用来开发微信小程序的框架选项。由于mpvue框架是完全基于Vue框架的（重写了其runtime和compiler），因此在用法上面是高度和Vue一致的（某些功能由于受限于小程序环境本身的原因而不能使用，但是瑕不掩瑜...
微信小程序wepy框架组件化开发与NPM支持解析
它会遍历代码中的`require`语句，将NPM包的文件复制到项目中，并将`require`转换为相对路径，使得开发者可以直接在小程序项目中使用NPM包，扩展了小程序的功能和灵活性。 3. **单文件模式**： - 微信小程序官方的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值