mpvue小程序使用iView Weapp全套流程

小程序原生的学习成本太高了,改学mpvue,这个要求有点vue的基础(主要是自己偷懒,用框架比较快)

用vue来写小程序的话,优点还是有很多的,比如:

1. 彻底的组件化开发能力:提高代码复用性 
2. 完整的 Vue.js 开发体验 
3. 快捷的 webpack 构建机制
4. 支持使用 npm 外部依赖 
5. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目 
6. H5 代码转换编译成小程序目标代码的能力

主要是第6点,让我决心来学mpvue的

先搭建vue脚手架

按文档的来一步步:

创建一个基于 mpvue-quickstart 模板的新项目 :vue init mpvue/mpvue-quickstart  hello(项目名)

然后后面的操作也写出来了---进入你的项目 cd hello,安装依赖 npm install ,运行  npm run dev

现在可以用小程序的开发者工具打开你的项目了

 我不知道你们会不会报这个错误,反正我的报了

这个在之前的文档中也没有出现过,这个的原因是小程序开发者工具是访问你的文件目录下的dist文件,但是点开你的dist文件夹里面,你会发现只有一个wx的文件夹,在wx这个文件夹里面才有你要访问的东西,这个时候你要把你的项目中的

改成dist/wx,然后就可以了:

当然现在你就可以用vue写你的小程序了(这里的头像就换一张图片),因为自己偷懒到了一定境界了,不想写css啊动画啊什么的,就想找个第三方UI组件,这里我用的是iView weapp,首先去GitHub上下载文件,链接:https://github.com/TalkingData/iview-weapp

下载完了以后就得到了一个压缩包

解压以后把里面dist文件的东西拷贝一份,放到你hello中的static的文件中(这里我新建个iview的子文件)

然后把你所有vue文件里面的样式什么的全清掉,在你要用到的页面里面找到json文件(没有的话就自己建一个)

并在里面引用你要用到的组件,在页面中写相关的样式

如上图;这个时候你会发现你的开发者工具会报什么路径错误的信息,这个就是之前提到的,开发者工具访问你的项目中的dist文件夹,这就是为什么在json文件中引用的时候用的,因为你最终是要用到的时候你的dist文件夹的东西,所以是向上2级,也就是2个“../”。

"i-col": "../../static/iview/col/index"  而不是  
"i-col": "../../../static/iview/col/index"

这个时候报错,是因为你还没有打包,然后你打包一下你的项目  npm run build  再运行一下你的项目npm run dev,就ok了

这个时候就算玩完了,你在其他页面的时候引用的时候,就按照这样的流程引用其相关联的组件就可以,谢谢!

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值