mpvue开发小程序

最新推荐文章于 2025-04-09 14:27:12 发布

妹妹你大胆地往前走啊！

最新推荐文章于 2025-04-09 14:27:12 发布

阅读量247

点赞数

分类专栏：小程序

原文链接：https://www.jianshu.com/p/6f8d74be3ff8

版权

小程序专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍使用mpvue创建和运行小程序的过程。首先通过vueinit命令初始化项目，配置项目名称、ID、描述等信息，然后运行dev命令进入开发模式。文章强调了mpvue将Vue+HTMLWeb开发的小程序代码转换为可运行的小程序代码，最后借助微信开发者工具预览运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建小程序
1.

vue init mpvue/mpvue-quickstart firstapp

出现以下选择和配置信息

? Project name firstapp
? wxmp appid touristappid
? Project description A Mpvue project
? Author kevinzhang <kevin.zhang@moredist.com>
? Vue build runtime
? Use Vuex? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? 小程序测试，敬请关注最新微信开发者工具的“测试报告”功能 

   vue-cli · Generated "firstapp".

   To get started:
   
     cd firstapp
     npm install
     npm run dev
   
   Documentation can be found at http://mpvue.com

2.cd firstapp
3.npm install
4.npm run dev
二、运行
1.成功运行后，这个项目代码就进入开发模式，一旦有源代码发生修改，就会触发自动编译。因为mpvue使用的是Vue + HTML Web的开发方式开发小程序，它最终还是需要被转换成小程序的代码才可以在小程序环境运行，所以这里的自动编译的目的就是要把Web代码编译成小程序代码。编译后的代码会在dist目录下：
在这里插入图片描述
2.运行并查看结果
上面的步骤中，我们开启开发模式后，其实并不能看到小程序的执行效果，要真正看小程序的运行界面的话，我们还是要借助微信开发者工具。