1.6【微信小程序全栈开发课程】mpvue小程序框架搭建及介绍

简介: mpvue 是美团开源的一个快捷开发小程序的框架,让我们可以使用vue.js语法编写小程序。大大降低了开发小程序的门槛,非常给力的一个框架。1、首先需要安装node.js环境(Mac电脑)

mpvue 是美团开源的一个快捷开发小程序的框架,让我们可以使用vue.js语法编写小程序。大大降低了开发小程序的门槛,非常给力的一个框架。


1、首先需要安装node.js环境(Mac电脑)


~$ brew update
~$ brew uninstall node
~$ brew install node
~$ brew postinstall node


brew 是 Mac 下的一个包管理工具,可以很方便地进行安装/卸载/更新各种软件包,程序员必备工具~


如果没有这个命令的话,自己搜索安装一下哦~


window电脑点击下面网址下载,根据自己的电脑选择是Windows 安装包 (.msi)32位或64位,安装时默认选择全部组件,正常安装即可。


http://nodejs.cn/download/


安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。


~$ node -v
v11.7.0
~$ npm -v
6.5.0


node.js是什么?


Node.js是一个JavaScript的运行环境,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。



npm是什么?

Node Package Manager翻译成中文就是node包管理器,安装node.js运行环境时会自动安装npm,后面我们通过npm来下载安装node相关的软件包


2、将npm的源换成国内源


由于npm的源在国外,国内用户下载软件包会比较慢,所以我们将npm的源换成国内的。


//运行成功,不会返回任何信息
~$ npm set registry https://registry.npm.taobao.org/


3、安装vue-cli脚手架


~$ sudo npm install -g vue-cli
//安装成功后,系统返回的信息
+ vue-cli@2.9.6
added 9 packages from 3 contributors, removed 3 packages and updated 102 packages in 22.949s
   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │       New minor version of npm available! 6.5.0 → 6.11.1       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.11.1   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯


4、创建mpvue项目


(1)创建名为truth_hold的mpvue项目


我们不需要额外安装mpvue的工具,直接用vue官方的工具就可以了~运行vue init mpvue/mpvue-quickstart truth_hold创建mpvue项目,其中truth_hold是项目名称


~/WeChatProjects$ vue init mpvue/mpvue-quickstart truth_hold
//系统返回消息
? Project name truth_hold   // 回车
? wxmp appid wx1537a4db01c83194 //这里需要写上你自己的Appid
? Project description A Mpvue project   // 回车
? Author xzn <xzn@stonescloud.com>   // 回车
? Vue build runtime   // 一直回车
? Use Vuex? Yes   //Y
? Use ESLint to lint your code? Yes  //Y
? 小程序测试,敬请关注最新微信开发者工具的“测试报告”功能

(2)打开truth_hold文件,安装配置文件并启动

//打开truth_hold文件
~/WeChatProjects$ cd truth_hold/
//安装配置文件
~/WeChatProjects/truth_hold$ npm install
//启动项目
~/WeChatProjects/truth_hold$ npm run dev
//出现下面信息说明启动成功了
DONE  Compiled successfully in 3913ms


5、导入项目


将刚刚创建的truth_hold项目文件导入到微信开发者工具中


(1)打开微信开发者工具,点击菜单栏的项目–导入项目


image.png


(2)选择truth_hold项目所在的目录


image.png


(3)导入项目后的界面


image.png


6、mpvue小程序框架介绍


在实际项目开发过程中,只需要操作src文件,系统会自动在dist文件中为我们生成原生小程序的目录结构


image.png

目录
相关文章
|
3天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
17天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
18天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
43 0
在线课堂+工具组件小程序uniapp移动端源码
|
3月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
404 3
|
3月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
62 0
微信小程序更新提醒uniapp
|
5月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
123 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
5月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
130 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
5月前
|
存储 小程序 JavaScript
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
80 7