热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

mpvue返回上一个页面_16【微信小程序全栈开发课程】mpvue小程序框架搭建及介绍

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

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 -vnpm -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 1369822836@.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)打开微信开发者工具,点击菜单栏的项目--导入项目

7d93a64cb78532f05fc81c455f20eb8b.png

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

3dad5375ce604dea91131757f6a538dc.png

(3)导入项目后的界面

504c17f79a21662edadd296101eab25c.png

6、mpvue小程序框架介绍

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

163319d2d7408cd44d3381743f66572e.png
作者:猫宁一 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程! 可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录:微信小程序全栈开发课程目录



推荐阅读
  • 本文详细介绍了如何在Oracle VM VirtualBox中实现主机与虚拟机之间的数据交换,包括安装Guest Additions增强功能,以及如何利用这些功能进行文件传输、屏幕调整等操作。 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 【小白学习C++ 教程】二十三、如何安装和使用 C++ 标准库
    【小白学习C++ 教程】二十三、如何安装和使用 C++ 标准库 ... [详细]
  • 高效的JavaScript异步资源加载解决方案
    本文探讨了如何通过异步加载技术处理网页中大型第三方插件的加载问题,避免将大文件打包进主JS文件中导致的加载时间过长,介绍了实现异步加载的具体方法及其优化。 ... [详细]
  • 在开发板的启动选项中看到如下两行:7:LoadBootLoadercodethenwritetoFlashviaSerial.9:LoadBootLoadercodethenwri ... [详细]
  • PHP-Casbin v3.20.0 已经发布,这是一个使用 PHP 语言开发的轻量级开源访问控制框架,支持多种访问控制模型,包括 ACL、RBAC 和 ABAC。新版本在性能上有了显著的提升。 ... [详细]
  • 在Eclipse中提升开发效率,推荐使用Google V8插件以增强Node.js的调试体验。安装方法有两种:一是通过Eclipse Marketplace搜索并安装;二是通过“Help”菜单中的“Install New Software”,在名称栏输入“googleV8”。此插件能够显著改善调试过程中的性能和响应速度,提高开发者的生产力。 ... [详细]
  • V8不仅是一款著名的八缸发动机,广泛应用于道奇Charger、宾利Continental GT和BossHoss摩托车中。自2008年以来,作为Chromium项目的一部分,V8 JavaScript引擎在性能优化和技术创新方面取得了显著进展。该引擎通过先进的编译技术和高效的垃圾回收机制,显著提升了JavaScript的执行效率,为现代Web应用提供了强大的支持。持续的优化和创新使得V8在处理复杂计算和大规模数据时表现更加出色,成为众多开发者和企业的首选。 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • WebStorm 是一款强大的集成开发环境,支持多种现代 Web 开发技术,包括 Node.js、CoffeeScript、TypeScript、Dart、Jade、Sass、LESS 和 Stylus。它为开发者提供了丰富的功能和工具,帮助高效构建和调试复杂的 Node.js 应用程序。 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • URL参数格式http:localhos:8080demo?ab&cd&ef匹配参数a对应的表达式为^a([^&]*)&匹配参数b对应的表达式为&b([^&]*)&匹配参数c对应 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
  • 字节码开发笔记:深入解析与应用技巧 ... [详细]
author-avatar
1021365712_3a478e
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有