微信小程序mpvue+Vant Weapp初始化
2023-03-07 09:44:46 时间
准备工作:
1.安装Node.js nodejs官网
//可查看node版本
$ node -v
$ npm -v
2.安装淘宝镜像cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装vue-cli脚手架构建工具
$ cnpm install -g vue-cli
第一步、创建一个基于 mpvue-quickstart 模板的新项目
可参考mpvue官网
$ vue init mpvue/mpvue-quickstart my-project
随即一路回车就好 (ESlint要是嫌麻烦可以选择N不装)
第二步、进入项目->安装依赖->启动项目
$ cd my-project
$ npm install
$ npm run dev
运行成功之后,可以看到本地多了个 dist 目录,这个目录里就是生成的小程序相关代码。 Vue开发环境已经搭建好,接下来打开微信开发者工具,打开我们的项目my-project
第三步、引入Vant Weapp小程序 UI 组件库
可参考Vant Weapp官网
# 通过 npm 安装
npm i vant-weapp -S --production
安装完后,打开项目里的build/webpack.base.conf.js文件,在baseWebpackConfig.plugins数组里增加多一个CopyWebpackPlugin。主要是为了mpvue在编译成微信小程序开发语言的时候,也顺带把vant组件复制到目录里,这样的话才能被项目找到。
new CopyWebpackPlugin([
{
from: resolve('node_modules/vant-weapp/dist'),
to: resolve('dist/wx/vant-weapp/dist'),
ignore: ['.*']
}
])
第四步、代码里引用vant
在src/app.json文件用全局引用某个组件,比如按钮组件
"usingComponents": {
"van-button": "vant-weapp/dist/button/index"
}
页面中直接引用组件就好了
默认按钮主要按钮信息按钮警告按钮危险按钮
注意:在微信开发者工具中选择ES6 转 ES5,否则要报错
第五步、重启项目,就可以在微信开发者工具中查看效果了
$ npm run dev
相关文章
- LibreOffice 7.5 发布:漂亮的新应用图标和酷炫功能
- elementary OS 7 发布
- Windows 应用兼容层 Wine 8.1 发布:默认启用“Windows 10”前缀
- 微软正测试新功能:当 Windows 11 有新的小组件可用时会提醒通知
- 解析分布式存储选型和应用九个典型问题
- ClickHouse在自助行为分析场景的实践应用
- Chrome DevTools 远程调试安卓网页的原理
- Uni-app + Vue3 页面如何跳转及传参?
- 微软证实系统还原点会损坏 Windows 11 22H2 版本应用程序
- 巧用 Transition 实现短视频 APP 点赞动画
- 初学者试试,HarmonyOS应用开发者基础认证
- 媒体实测微软 Windows 开发工具包 2023:存在不兼容 HDR 显示器、某些应用无法运行等问题
- 快速了解Navigator API SetAppBadge
- 微软 Windows 11 Dev 预览版 Build 25276 发布,应用兼容问题对话框 UI 改进
- 基于Next.js、Prisma、Postgres和Fastfy构建全栈APP
- 开始菜单搜索框变圆角,微软 Windows 11 Beta 预览版 22621.1095 和 22623.1095 发布
- 2022-2023 十大应用开发趋势
- 观远数据发布业内首部《移动BI白皮书》,深入业务数字化场景重新定义移动BI
- Windows 10 学院:不借助第三方工具如何卸载 Windows 10 预装应用
- 正处高质量发展期,我国大数据产业突破1.3万亿元