精华内容
下载资源
问答
  • 刚刚开始接触小程序,准备采用mpvue框架进行学习开发,接下来就说说如何准备一个空的mpvue吧,像极了用脚手架创建一个空的vue一样。 具体操作以及详细api我们可以点开mpvue官网查看 第一步:找好存储位置创建一个空...

    刚刚开始接触小程序,准备采用mpvue框架进行学习开发,接下来就说说如何准备一个空的mpvue吧,像极了用脚手架创建一个空的vue一样。

    具体操作以及详细api我们可以点开mpvue官网查看

    第一步:找好存储位置创建一个空mpvue文件夹
    例如我想在D:\myDemo创建,那么在对应位置打开我们俗称的黑色小窗口:
    在这里插入图片描述
    在这里插入图片描述
    输入vue init mpvue/mpvue-quickstart my-project ,然后按回车就好。(my-project是文件名,你自定义)
    在这里插入图片描述
    然后就一路回车就好:
    在这里插入图片描述
    这时我们就创建一个基于 mpvue-quickstart 模板的新项目,之后就是安装依赖:
    cd my-project进入该文件,然后输入npm install下载依赖
    在这里插入图片描述
    安装完之前的所有东西后,最后想运行?输入npm run dev
    在这里插入图片描述
    呃?和想象的不一样?没有出现想vue一样的链接打开浏览器预览,其实小程序是不能在浏览器预览的,所以输入npm run dev只是会打包生成dist文件夹
    在这里插入图片描述
    那我们要如何运行预览呢?这时就要借助微信开发者工具了,也是在官网下载即可

    在开发者工具选择小程序打开刚创建的文件夹,打开模拟器就可以看到预览效果了。
    在这里插入图片描述

    展开全文
  • 一、安装cli-init. 当我们直接搭建脚手架时,如果没有安装cli-init会报错。因此,我们首先需要...1、基于mpvue-quickstart模板创建新项目 vue init mpvue/mpvue-quickstart my-project 在输入命令后,我们需要在...

    一、安装cli-init.

    当我们直接搭建脚手架时,如果没有安装cli-init会报错。因此,我们首先需要安装cli-init。使用如下命令可以直接安装。

    npm install -g @vue/cli-init
    

    二、搭建脚手架

    1、基于mpvue-quickstart模板创建新项目

    vue init mpvue/mpvue-quickstart my-project
    

    在输入命令后,我们需要在?行按下回车,表示同意。
    在这里插入图片描述

    2、安装依赖和运行

    cd my-project
    npm install
    npm run dev
    

    注:dev默认微信小程序
    之后我们在WebStorm中进行修改源码,在微信开发者工具中进行调试
    WebStorm链接:https://pan.baidu.com/s/1LSTruuV3NJ3ReMeckQSSpw
    提取码:7uun
    微信开发者工具链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    展开全文
  • vue项目转小程序-mpvue项目创建前言创建mpvue项目 前言 这次遇到了要拿很久之前用vue写的移动端项目,改成小程序的要求。因为本人只会用原生的开发微信小程序,所以这次也是学习了一下mpvue,现在来总结一下。 创建...

    vue项目转小程序-mpvue项目创建

    前言

    这次遇到了要拿很久之前用vue写的移动端项目,改成小程序的要求。因为本人只会用原生的开发微信小程序,所以这次也是学习了一下mpvue,现在来总结一下。

    创建mpvue项目

    mpvue是美团开源的项目,先贴上官方地址:http://mpvue.com/
    创建项目前先检查一下node和npm是否安装好,然后开始安装vue-cli脚手架,注意,这要2.x版本的,3.x版本的创建不了。

    $ npm install --global vue-cli@2.9
    

    安装完之后,初始化一个基于mpvue-quickstart模板的新项目

    $ vue init mpvue/mpvue-quickstart my-project
    

    没什么特别要求的话,基本上是一路回车就好
    创建完之后就是下载依赖,启动项目拉

    $ cd my-project
    $ npm install
    $ npm run dev
    

    项目启动成功之后,目录会多了一个dist文件夹,就是把vue代码转成了小程序代码,把整个项目放到微信开发者工具就可以预览拉。

    项目创建的时候一般都有px2rpx-loader的,所以写项目的时候可以直接用px,然后编译的时候会转成rpx。
    众所周知,vue项目是用的vue-router,怎么在mpvue中用vue-router和引入第三方ui组件呢,请看小编的其他文章!

    展开全文
  • 目前mpvue框架使用的是vue2.x,所以需要使用vue2.x的脚手架 npm install -g vue-cli 搭建mpvue脚手架 基于mpvue-quickstart模板创建新项目 // my-project 为创建的项目名 vue init mpvue/mpvue-quickstart my-...

    mpVue2.0多端小程序框架

    注意事项:

    • 目前mpvue框架使用的是vue2.x,所以需要使用vue2.x的脚手架

      npm install -g vue-cli
      

    搭建mpvue脚手架

    • 基于mpvue-quickstart模板创建新项目
    // my-project 为创建的项目名
    vue init mpvue/mpvue-quickstart my-project
    
    • 安装依赖和运行

    也可以使用yarn进行安装;

    yarn装包成功后框架提供的readme中是使用npm dev这里是错误的

    直接使用yarn dev就可以了

    cd my-project
    npm install
    npm run dev
    

    对比小程序中的特殊传参和方法

    • 如何获取小程序在 page onLoad 时候传递的 options

      • 在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。
    • 如何获取小程序在 app onLaunch/onShow 时候传递的 options

      • 在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。
    • 如何捕获 app 的 onError

      • 由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:

        export default {
           // 只有 app 才会有 onLaunch 的生命周期
           onLaunch () {
               // ...
           },
        
           // 捕获 app error
           onError (err) {
               console.log(err)
           }
        }
        

    mpvue框架使用的相关建议

    • 不要在选项属性或回调上使用箭头函数

    • 比如 created: () => console.log(this.a)vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你做预期的 Vue 实例,且 this.athis.myMethod 也会是未定义的。

    • 精简 data 数据

      • 冗余数据不要挂在 data 里,所有在 data/props/computed 中的数据,每次变更都会从微信小程序的 JSCore 进程,通过 setData 序列化成字符串后发送到 JSRender 进程。所以,如果你的数据量巨大的时候,会导致页面非常卡顿。
    • 优化长列表性能

      • 避免在 v-for 中嵌套子组件,这样可以优化大部分部分 setData 时的冗余数据。
      • 通过实践发现 wx:if 和 hidden 的优化肉眼不可见,所以或许可以试试直接通过样式 display 来展示和隐藏。
      • 如果列表过长,强烈建议产品思考更好的展示形态。比如只展示热门,多余的折叠等形式。
    • 合理使用双向绑定 mpvue 建议使用 v-model.lazy 绑定方式以优化性能,此外 v-model 在老基础库下输入框输入时可能存在光标重设的问题。

    • 谨慎选择直接使用小程序的 API 如果你有小程序和H5复用代码的需要,业务代码需要保持对 WEB Vue.js 的兼容性。此时我们不建议在代码中直接调用小程序API,更好的选择是通过桥接适配层屏蔽两端差异。

    • 列表渲染

      • 嵌套列表渲染,必须指定不同的索引

    mpvue踩坑

    • 列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@ @regionchange,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy 中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既 ``
    • 小程序能力所致,bind 和 catch 事件同时绑定时候,只会触发 bind ,catch 不会被触发,要避免踩坑。
    • 事件修饰符
      • .stop 的使用会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的 catchEventName 失效!
      • .prevent 可以直接干掉,因为小程序里没有什么默认事件,比如submit并不会跳转页面
      • .capture 支持 1.0.9
      • .self 没有可以判断的标识
      • .once 也不能做,因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理,但非常的不优雅,违背了原意
    展开全文
  • mpvue基本使用

    2019-10-02 14:45:00
    ## 什么是mpvue ## -美团开发使用vue语法开发小程序的...## 创建mpvue项目 ## 1.必须安装node.js 2.安装vue脚手架npm install -g vue-cli 3.创建项目,找到项目目录运行:vue init mpvue/mpvue-quickstart mym...
  • mpvue小程序

    2020-09-09 22:09:59
    1、搭建mpvue脚手架 第一步,基于mpvue-quickstart模板创建新项目 vue init mpvue/mpvue-quickstart my-project 第二步,安装依赖和运行 cd my-project npm install npm run dev 2、打开微信开发者...
  • 申请小程序 ...创建mpvue模板。 npm install 加载依赖, npm run dev编译运行项目, 打开微信开发者工具,导入项目,路径指向dist/wx 就是用hbuilderx,编写mpvue项目, 用微信开发者工具来调试运行。 ...
  • 创建一个基于 mpvue-quickstart 模板的新项目 vue init mpvue/mpvue-quickstart 项目名称 然后按照提示运行: 中间会询问一下问题:前面几项直接回车 直到:询问是否安装 vuex 和 ESLint,根据需要安装即可。 其余...
  • 微信小程序搭建mpvue项目过程 第一步:安装Node环境 下载node.js安装包 下载地址:node.js中文网 ...安装vue-cli脚手架(vue-cli是vue框架的脚手架)并创建项目 cmd下输入 npm install vue-cli -g下载
  • npm install --global vue-cli vue脚手架 ...创建一个基于mpvue-quickstart的新摸板 在此我们需要命名我们的项目名称 我们开发小程序的appid, vux可选择性安装, ESl...
  • mpvue构建小程序一

    2019-03-22 10:59:48
    2:vue init mpvue/mpvue-quickstart my-project(创建项目) 官方链接:http://mpvue.com/mpvue/#_14 3:mpvue生命周期: onLoad,监听页面加载 onShow,监听页面显示 onReady,监听页面初次渲染完成 onHide...
  • 1、搭建Mpvue项目

    2020-02-27 12:24:37
    一、Mpvue介绍 ...安装脚手架 npm install --global vue-cli / cnpm install --global vue-cli 创建项目 vue init mpvue/mpvue-quickstart myvue cd到项目里面安装依赖 cd myvue npm i...
  • 1、根据官方文档,用mpvue搭建脚手架。 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-...
  • 1、安装脚手架 npm install --global vue-cli 2、创建项目 vue init mpvue/mpvue-quickstart YourProjectName 3、cd 到项目里面安装依赖 cd YourProjectName 4、安装依赖 cnpm install 5、安装less cnpm install...
  • 我的女友叫mpvue,为什么不选择...1、脚手架构建项目,我直接在当前项目中创建,一路Y就可以创建项目了。 vue init mpvue/mpvue-quickstart . 创建完项目yarn一下。 2、启动,将vue代码转译到dist目录下 npm run ...
  • mpvue初始化项目,npm run dev后没反应

    千次阅读 2018-09-21 17:35:39
    使用vue-cli脚手架创建一个新的mpvue项目后,npm i安装好包后,npm run dev会没反应,是因为官方更新了mpvue-loader。这个时候不是没反应,而是反应比较慢,等个一两分钟,dist目录就生成啦。 ...
  • 一、环境需求 node环境,vue-cli脚手架,微信小程序开发工具 二、安装 node node官网 进入官网下载,直接安装即可。...三、使用脚手架创建项目 蓝色字体部分要自己填写。 四、启动项目 cd 到项目根目录
  • 一、所需环境 node环境,vue-cli脚手架,微信小程序开发工具(用来展示页面效果) 二、安装 1. node node官网进入官网下载,直接安装即可。安装后打开cmd,运行查看版本...三、使用脚手架创建项目 项目目录如...
  • 2)vue-cli vue-cli是一个vue专用的项目脚手架工具,可以用于方便的创建vue项目骨架代码,包括我们要讲到的mpvue的项目代码。我们可以通过安装node.js后里面包含的npm工具来安装vue-cli,在命令行输入如下命令:npm ...
  • 首先确保node.js和vue脚手架已经全部全局配置好 cd到想要创建项目的目录下使用命令 vue init mpvue/mpvue-quickstart mpvue01 mpvue01为项目文件夹名称可以随便写,前边的命令不可以随便写 cd到项目里面安装依赖cd ...
  • 1.安装 vue-cli 脚手架 npm install --g vue-cli 2.创建项目 vue init mpvue/mpvue-quickstart test-wxapp cd test-wxapp npm i npm run dev 项目就跑起来了,这个时候,我们打开微信开发者工具,...
  • 在桌面创建index.html文件第二步 填入如下代码第三步 使用浏览器打开index.html三、源码分析第一步,加载vue.js脚本第二步,生成div第三步,执行script脚本四、事件五、条件六、循环七、双向绑定八、组件化九、...
  • 之前搭建了MK-01发现还是美中不足,目前APP使用感觉没有小程序方便,在这里我想了想还是用小程序开发吧。 MK-02准备用美团开源项目mpvue。 准备环境 ...创建第一个基于mpvue的小程序项目代码 vue i
  • 推荐UI组件库用脚手架vue-cli创建项目项目使用相关说明VuexVue开发出的移动端app项目如何打包成apk小程序框架 mpvue 最近忙着找工作,在这期间的复习过程中,为了方便查阅,总结了很多我常用到的基础内容和面试题。...
  • anka-brush - 一款为简化小程序里canvas画图操作而创建的工具库 anka-tracker - 小程序打点库,用于统计用户行为数据 mpvue-calendar - 微信小程序/浏览器端的日历组件mpvue-calendar;基于mpvue平台 支持农历、按...

空空如也

空空如也

1 2
收藏数 29
精华内容 11
关键字:

脚手架创建mpvue

vue 订阅