美文网首页
关于Mpvue的简单介绍以及开发时踩到的一些坑

关于Mpvue的简单介绍以及开发时踩到的一些坑

作者: stoken | 来源:发表于2018-05-02 14:26 被阅读0次

1.介绍

        mpvue是一套定位于开发小程序的前端开发框架,其核心目标是提高开发效率,增强开发体验。使用该框架,开发者只需初步了解小程序开发规范、熟悉 Vue.js基本语法即可上手。框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为小程序并确保其正确运行。此外,框架还通过vue-cli 工具向开发者提供 quick start 示例代码,开发者只需执行一条简单命令,即可获得可运行的项目。

2.安装 mpvue

        # 全局安装 

        vue-cli$ npm install --global vue-cli

        # 创建一个基于 mpvue-quickstart 模板的新项目

        $ vue init mpvue/mpvue-quickstart my-project

        # 安装依赖

        $ cd my-project

        $ npm install

        # 启动构建$ npm run dev

        但安装预览的时候,不是用浏览器打开输入:localhost:8080。而是打开微信开发者工具,把项目根目录导入进去。

3.mpvue特性

        彻底的组件化开发能力:提高代码

        完整的 Vue.js 开发体验

        方便的 Vuex

         数据管理方案:方便构建复杂应用

        快捷的 webpack构建机制:自定义构建策略、开发阶段 hotReload

        支持使用 npm 外部依赖

        使用 Vue.js 命令行工具

        vue-cli 快速初始化项目

        H5代码转换编译成小程序目标代码的能力

       支持小程序的原生组件,比如: picker,map 等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定

4.对于vue的支持

        不支持ElmentUI和Vue-router

        不支持纯 HTML,小程序里所有的 BOM/DOM 都不能用,也就是说 v-html 指令不能用。

        不支持部分复杂的 JavaScript 渲染表达式

        不支持过滤器

        不支持在 template 内使用 methods 中的函数。

        暂不支持在组件上使用 Class 与 Style 绑定

5.对于mpvue的踩坑

        eslint连vue和js后缀文件都有严格校验

                找到build目录的webpack.base.conf.js把器rule注释掉。

                 // {

                        //   test: /\.(js|vue)$/,

                        //   loader: 'eslint-loader',

                        //   enforce: 'pre',

                       //   include: [resolve('src'),

                       resolve('test')],

                      //   options: {

                      //     formatter:

                            require('eslint-friendly-formatter')

                      //   }

              // },

相对路径的图片不显示。

       解决是:把路径import进来,或者是把图片放在static目录下引用,然而作为css background-image引用时,只能选择引用远程图片,或者相对目录小于8k(webpck配置有关)的图片,不然编译器会报错

新增页面有时没反应。

        因为 webpack 编译的文件使用配置的 entry决定的,新增的页面并没用添加进 entry,所以需要手动 npm run dev 一下

基于mpvue使用axios

        通过webpack别名(alias)将axios指向axios/dist/axios,如下

        alias: {

                'vue': 'mpvue',

                'axios':'axios/dist/axios',

                '@': resolve('src')

        }

        小程序环境和浏览器不一致导致的,不过别慌,我们可以写adapter

        axios.defaults.adapter = function (config) {

                return new Promise((resolve, reject) => {

                        console.log(config)

                        // TODO wx.request(...)

                })

        }

更多的关于mpvue的坑可以查看如下博客

http://www.poorren.com/mpvue-mini-program-ajax-axios

http://www.bslxx.com/m/view.php?aid=1824

相关文章

网友评论

      本文标题:关于Mpvue的简单介绍以及开发时踩到的一些坑

      本文链接:https://www.haomeiwen.com/subject/mgccrftx.html