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

2019-10-22 本文已影响0人 l猫宁一

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](mailto: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文件中为我们生成原生小程序的目录结构

作者：猫宁一
95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录