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

目录
相关文章
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
25 0
|
12天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
12天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
23 0
|
12天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
31 3
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
29 2
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
25 0
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
25 0
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的旅游出行必备商城小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的旅游出行必备商城小程序的详细设计和实现
27 0

热门文章

最新文章