vue 项目难点_mpvue开发小程序的难点重点总结

我们再使用mpvue开发小程序会遇到许多困难，下面就一些困难做一个关于mpvue开发小程序的难点重点总结

框架的选择

原生的小程序我本人并没有学习过，更别提拿来开发一款商用的小程序了，刚好还在前公司时，当时的前端团队在提到小程序的解决方案时有分享了mpvue，到了新公司之后技术老大也有提到mpvue，而我本人过去一年多也一直在写vue，对vue写法比较熟悉，而且新公司团队对小程序期待已久，希望尽快上架，所以选择mpvue来开发也是最快最合理的了！

项目的搭建

看了mpvue的官方文档，项目的搭建自然也选择了官方推荐的 vue-cli ， 在看了五分钟上手教程后，使用命令

vue init mpvue/mpvue-quickstart my-project

生成了基本的项目，在后来的开发中，项目的配置基本没做改动，只是添加了less-loader。

目录结构

基本上是vue-cli生成的目录结构，加了部分文件夹，主要是与后台进行数据交互所使用的框架flyio的配置文件夹(api文件夹)，以及整个项目数据管理所使用的vuex(store文件夹),整体目录结构如下：

project

└───build

└───config

└───dist

└───node_modules

└───src

└───api

| ajax.js // flyio请求与响应拦截器的配置文件

| config.js // 请求的配置文件

| index.js // 生成请求api实例文件

| Server.js // 项目的数据请求统一管理文件

└───components

└───pages

└───store

└───modules // vuex模块文件夹

| index.js // vuex处理文件

| App.vue

| config.js

| main.js

└───static

└───images

└───lib

└───weui

│ README.md

│ package.json

│ package-lock.json

复制代码

踩到的坑

相信很多使用过mpvue的同学都或多或少猜到了一些坑，我也是踩到了不少的坑浪费了不少的宝贵时间，虽然网上关于mpvue的踩坑的文章一搜一箩筐，但我还是要写一下。。。下面就是我在本次小程序开发过程中遇到的坑(们)以及针对它们的解决方案：

### tabBar图标问题

复制代码

在 配置小程序原生的底部tabBar 时，遇到了第一个问题：在将设计师给我的图标icon路径设置正确的情况下， 开发者工具上的tabBar的图标总是会很大，而且几乎占满了整个高度 ，相当难看，搜了很多博客都没有找到解决办法，期间还尝试了自己实现tabBar，但是在看到那令人呕呕呕的效果之后，我还是放弃了，又回到原生的tabBar，然后静下心来想了想，最后在对比github上的一些mpvue的项目之后，发现原来是