热门标签 | 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后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程! 可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录:微信小程序全栈开发课程目录



推荐阅读
  • 小程序mpvue图片绘制水印_16【微信小程序全栈开发课程】mpvue小程序框架搭建及介绍...
    mpvue是美团开源的一个快捷开发小程序的框架,让我们可以使用vue.js语法编写小程序。大大降低了开发小程序的门槛,非常给力的一个框架。1、首先需要安 ... [详细]
  • 想要快速的入门,就需要在初期投入足够多的时间和精力。除了课程学习笔记,在开发项目练手时,会碰到很多问题,这些问题及解决方案最好一并记录。能够把python学会,一定也能把java ... [详细]
  • mpvue框架:搭建流程
    mpvue介绍mpvue(github地址请参见)是一个使用Vue.js开发小程序的前端框架。框架基于Vue.js核心,mpvue修改了 ... [详细]
  • window下的python安装插件,Go语言社区,Golang程序员人脉社 ... [详细]
  • 如何高效查看Java API和源码
    在Java学习过程中,查看API文档和源码是提高编程能力的重要手段。本文将详细介绍如何使用各种工具和方法高效地查看Java API和源码。 ... [详细]
  • 本文节选自《NLTK基础教程——用NLTK和Python库构建机器学习应用》一书的第1章第1.2节,作者Nitin Hardeniya。本文将带领读者快速了解Python的基础知识,为后续的机器学习应用打下坚实的基础。 ... [详细]
  • 专业人士如何做自媒体 ... [详细]
  • 单元测试:使用mocha和should.js搭建nodejs的单元测试
    2019独角兽企业重金招聘Python工程师标准BDD测试利器:mochashould.js众所周知对于任何一个项目来说,做好单元测试都是必不可少 ... [详细]
  • Python 3 Scrapy 框架执行流程详解
    本文详细介绍了如何在 Python 3 环境下安装和使用 Scrapy 框架,包括常用命令和执行流程。Scrapy 是一个强大的 Web 抓取框架,适用于数据挖掘、监控和自动化测试等多种场景。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 在GitHub上克隆vue-element-admin项目时遇到依赖安装错误
    在 GitHub 上克隆 vue-element-admin 项目后,使用 `npm install` 安装依赖时遇到了未知的 Git 错误。具体错误信息为 `npm ERR! code 128`,提示命令执行失败。这可能是由于网络问题、Git 配置不正确或某些依赖包的仓库地址无效导致的。建议检查网络连接、更新 Git 版本并确保所有依赖项的 URL 正确无误。 ... [详细]
  • 掌握PHP编程必备知识与技巧——全面教程在当今的PHP开发中,了解并运用最新的技术和最佳实践至关重要。本教程将详细介绍PHP编程的核心知识与实用技巧。首先,确保你正在使用PHP 5.3或更高版本,最好是最新版本,以充分利用其性能优化和新特性。此外,我们还将探讨代码结构、安全性和性能优化等方面的内容,帮助你成为一名更高效的PHP开发者。 ... [详细]
  • 优化Node.js项目:有效管理和清理依赖项
    在Node.js项目中,有效管理和清理依赖项是提升性能和安全性的重要步骤。为了确保项目中仅保留必要的库,应定期检查并移除`node_modules`目录下不再使用的包。同时,所有必需的依赖项都应在`package.json`文件中明确列出,以保证项目的可维护性和可复现性。此外,利用如`npm prune`等工具可以帮助自动化这一过程,进一步提高效率。 ... [详细]
  • Linux命令如何查询小程序中的WePY云开发
    这篇文章给大家分享的是有关Linux命令如何查询小程序中的WePY云开发的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。W ... [详细]
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社区 版权所有