⑤mpvue 小程序框架：初始化项目分析项目结构

深藏阁楼爱情的钟 2023-02-13 03:58 20阅读 0赞

### mpVue ###

*  简介
 *  初始化项目
 *  分析项目结构
 *   *  分析src文件夹中的内容

--------------------

***本人是个新手，写下博客用于自我复习、自我总结。  
如有错误之处，请各位大佬指出。  
学习资料来源于：尚硅谷***

--------------------

# 简介 #

![在这里插入图片描述][20200527143024446.png]  
mpVue（Vue in Mini Program）是美团开发团队推出的一个小程序的框架，是现在市面上最火的小程序框架之一。其优点是可以使用vue.js的开发模式去开发小程序，融合了原生小程序和Vue.js的特点。也可以使用第三方库，比如：Vuex等。  
（因此，如果想要学习下面的内容，需要有一定的vue基础）

**特点**

1.  组件化开发
2.  完整的Vue.js开发体验
3.  可使用Vuex管理状态
4.  Webpack构建项目
5.  最终H5转换工具将项目编译成小程序识别的文件

相关内容可以参考mpVue官网以及官方文档  
官网：[http://mpvue.com/][http_mpvue.com]  
使用手册：[http://mpvue.com/mpvue/][http_mpvue.com_mpvue]  
微信小程序开放文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/][https_developers.weixin.qq.com_miniprogram_dev_framework]

--------------------

# 初始化项目 #

图片截自官网，初始化项目的过程和vue类似。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]  
说明：  
1、如果已经安装过`vue-cli`就不用再次安装了。  
2、打开cmd后，一定要**进入到你想要编写代码的目录**下，再`vue init mpvue/mpvue-quickstart`，它的最后就是项目名。  
比如：  
![在这里插入图片描述][20200527152152759.png]  
3、运行中，会出现以下信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]  
需要说明以下几点：  
`Project name`毫无疑问就是项目名，默认为第二步中设置的项目名。如果不需要改名就可以略过。  
`appid`是小程序里你的唯一标识，有了这个标识你才能获得一些特权，没有的话需要**去官网注册一个微信小程序开发者帐号**，注册好后就会提供一个appid。在这里暂时不使用。

注册开发者帐号需要去到微信公众平台官网注册：[https://mp.weixin.qq.com/][https_mp.weixin.qq.com]  
注册好后，可以根据这个步骤找到appid：  
[https://jingyan.baidu.com/article/4ae03de35be7487eff9e6b84.html][https_jingyan.baidu.com_article_4ae03de35be7487eff9e6b84.html]

`Use Vuex`在这里暂时不使用，设置No  
`Use ESLint`之前在Vue中已经提到过了，是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。在这里选择Yes。但是实际上在使用过程中ESLint还是很烦的（如果觉得不烦请忽略），我们之后还会把它关掉。（当然在项目收工之后还是会把它打开，对代码进行标准化）

运行好后，它也会提示你，接下来该怎么做。即：进入建好的文件夹，下载依赖，然后运行即可。  
（需要nodejs）  
![在这里插入图片描述][20200527153558251.png]

`npm run dev`正确运行后，会出现提示：  
![在这里插入图片描述][20200527170954421.png]  
在项目中就可以看到多出了一个文件夹dist，这个文件夹就是用来部署到小程序中的。  
![在这里插入图片描述][20200527171047561.png]  
在dist里就会出现很多原生小程序需要的文件，比如 wxml ，wxss 尾缀的文件。  
即：我们使用mpVue就不需要考虑 把我们的文件转成小程序能理解的文件，mpVue会帮我们做这个工作。

这个尾缀含义也很好理解：wxml = 微信的html ，wxss = 微信的css

当然mpVue也可以帮我们挂载其他平台的小程序：  
（如何使用在package.json中有说明。）  
![在这里插入图片描述][20200527172202172.png]

那么这个效果该去哪里看？需要下载**微信web开发者工具**。  
[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]

导入项目的文件夹即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]

--------------------

# 分析项目结构 #

因为大部分和vue很像，在这里就不详细说明了，有需要的可以参考我之前文章中的：  
模板项目的结构  
[https://blog.csdn.net/qq\_45613931/article/details/105812344][https_blog.csdn.net_qq_45613931_article_details_105812344]  
![在这里插入图片描述][20200527155143207.png]  
build，config里的文件和vue中的差不多，大部分是针对webpack以及项目的一些配置。  
src：源文件。  
static：存放项目需要的静态资源。  
babelrc：可以帮我们转换语法：用来将ES6转为ES5，JSX转为JS。  
eslintignore：忽略eslint检查的一些文件。之前提到暂时关闭eslint就可以在这里设置：  
![在这里插入图片描述][20200527155839778.png]  
eslintrc：eslint运行时要检查的文件。  
index.html：运行时的主页面，和vue脚手架构建出的一样。  
package.json：项目的一些相关信息。  
package.config.json：小程序项目的配置文件，在这里就可以修改我们之前没有设置的appid。

--------------------

## 分析src文件夹中的内容 ##

我们知道组件化（模块化）是vue的一大特点，一提到模块化，那么src中肯定有一个入口文件，在这里是main.js。  
![在这里插入图片描述][20200527161235808.png]  
**main.js中的内容**

import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    App.mpType = 'app'
    
    const app = new Vue(App)
    app.$mount()

配置Vue脚手架的时候会有一些提示，`Vue.config.productionTip = false`就可以把这些提示关掉。  
`App.mpType = 'app'`：声明当前的App代表整个应用，而不是一个组件，与其他组件区分开。  
生成实例的部分之前会这么使用：

new Vue({ 
    	el: '#app'
    	render: h => h(App)
    })

但是在mpVue里只能如下这么使用。

const app = new Vue(App)
    app.$mount()

`app.$mount()`：挂载整个应用，使它生效。

**App.vue中的内容**  
打开App.vue你会发现，只有两部分：script和style。  
template没有使用的原因：App.vue是整个应用，所以在这里不需要写任何页面。

在script里，就可以写当前整个应用的生命周期以及全局的一些数据。需要说明的是，这个生命周期可以是vue里的生命周期，也可以是原生小程序里的生命周期。

这个style就是全局公共的样式。

**app.json**：全局的配置文件  
其中：  
pages：小程序页面的路径  
window：窗口的一些表现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]  
这里再说明pages文件夹，  
![在这里插入图片描述][20200527165322233.png]  
需要说明的是，pages里的每个组件都需要有一个main.js，且其中必须包含以下信息

import Vue from 'vue'
    import App from './index'
    
    const app = new Vue(App)
    app.$mount()

而这时的`app.$mount()`就是用来挂载当前的页面。只有挂载这个页面，这个页面才能生效。

这里的vue组件就需要包含template、script、style三部分了，有了这三部分就可以代表一个页面。（分别代表html js css）

json文件可有可无，需要的话就去设置即可，但是需要说明的是，它的命名一定是main.json。因为在运行后的dist里，所有的文件名都会转成main。那我们在这里就直接叫它main.json。  
![在这里插入图片描述][20200527173336572.png]

[20200527143024446.png]: https://img-blog.csdnimg.cn/20200527143024446.png
[http_mpvue.com]: http://mpvue.com/
[http_mpvue.com_mpvue]: http://mpvue.com/mpvue/
[https_developers.weixin.qq.com_miniprogram_dev_framework]: https://developers.weixin.qq.com/miniprogram/dev/framework/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527144557447.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[20200527152152759.png]: https://img-blog.csdnimg.cn/20200527152152759.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200527152547160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[https_jingyan.baidu.com_article_4ae03de35be7487eff9e6b84.html]: https://jingyan.baidu.com/article/4ae03de35be7487eff9e6b84.html
[20200527153558251.png]: https://img-blog.csdnimg.cn/20200527153558251.png
[20200527170954421.png]: https://img-blog.csdnimg.cn/20200527170954421.png
[20200527171047561.png]: https://img-blog.csdnimg.cn/20200527171047561.png
[20200527172202172.png]: https://img-blog.csdnimg.cn/20200527172202172.png
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200527181428584.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_qq_45613931_article_details_105812344]: https://blog.csdn.net/qq_45613931/article/details/105812344
[20200527155143207.png]: https://img-blog.csdnimg.cn/20200527155143207.png
[20200527155839778.png]: https://img-blog.csdnimg.cn/20200527155839778.png
[20200527161235808.png]: https://img-blog.csdnimg.cn/20200527161235808.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200527163905107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[20200527165322233.png]: https://img-blog.csdnimg.cn/20200527165322233.png
[20200527173336572.png]: https://img-blog.csdnimg.cn/20200527173336572.png