mpvue小程序使用iView Weapp全套流程
小程序原生的学习成本太高了,改学mpvue,这个要求有点vue的基础(主要是自己偷懒,用框架比较快)用vue来写小程序的话,优点还是有很多的,比如:1. 彻底的组件化开发能力:提高代码复用性 2. 完整的 Vue.js 开发体验 3. 快捷的 webpack 构建机制4. 支持使用 npm 外部依赖 5. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目 6. H5...
小程序原生的学习成本太高了,改学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了
这个时候就算玩完了,你在其他页面的时候引用的时候,就按照这样的流程引用其相关联的组件就可以,谢谢!
更多推荐
所有评论(0)