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位,安装时默认选择全部组件,正常安装即可。
安装完成后,可以命令行工具中输入 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)打开微信开发者工具,点击菜单栏的项目–导入项目
(2)选择truth_hold项目所在的目录
(3)导入项目后的界面
6、mpvue小程序框架介绍
在实际项目开发过程中,只需要操作src文件,系统会自动在dist文件中为我们生成原生小程序的目录结构