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

浅浅的花香味﹌ 2023-06-07 14:25 24阅读 0赞

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/][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][] 等服务端语言平起平坐的[脚本语言][Link 1]。

> ###### 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）打开微信开发者工具，点击菜单栏的项目–导入项目 ######

![format_png][]

###### （2）选择truth\_hold项目所在的目录 ######

![format_png 1][]

###### （3）导入项目后的界面 ######

![format_png 2][]

#### 6、mpvue小程序框架介绍 ####

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

> **作者：猫宁一**  
> 全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~  
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 2]

![format_png 4][]

[http_nodejs.cn_download]: http://nodejs.cn/download/
[PHP]: https://baike.baidu.com/item/PHP/9337
[Python]: https://baike.baidu.com/item/Python/407313
[Perl]: https://baike.baidu.com/item/Perl/851577
[Ruby]: https://baike.baidu.com/item/Ruby/11419
[Link 1]: https://baike.baidu.com/item/%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80/1379708
[format_png]: /images/20230601/43763d6263294cb0ab9b99e96a61e83e.png
[format_png 1]: /images/20230601/953eed2b0d7b40cbb50b9b9f4c81e238.png
[format_png 2]: /images/20230601/00b08eb925bc43caa8cbcf75df1d63de.png
[format_png 3]: /images/20230601/17de3bee93be42fc9aae7846d21b72a9.png
[Link 2]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 4]: /images/20230601/14d807d6ae1b4041bac1191a2e4c4aec.png