uni-app的使用 和 vant weapp组件库的引用

简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

特点

1. 学习成本低，如果学习过vue.js和微信小程序就可以直接上手写项目。
2. 项目目录结构，与微信小程序一样，配置文件以及配置文件内容都一样。
3. 语法，uni-app的语法可以理解为是vue和微信小程序的结合体，在模板上使用vue的写法，在js当中是使用的微信小程序的写法。数据的绑定也是使用vue的写法。

注意：接口数据请求的数据存储是vue和微信小程序二者的结合，接口请求使用小程序的结构，数据的保存使用vue的写法，如下图进行对比

首先是vue的，数据的储存是使用双向数据绑定的：
然后是微信小程序的数据储存：小程序是在数据请求过来的时候，得先在setdata中进行储存，然后再把储存的值写到data中，setdata相当于一个中转站。请求过来的数据必须先在setdata中进行储存。
最后是uni-app数据请求的数据储存：

学过微信小程序的同学，在学习uni-app一定要注意，我是刚学完小程序之后立即学的un-app，所以刚开始的时候有点倒不过来。

使用

项目创建

1. HBuilderX 直接创建，HBuilderX为uni-app做了特别强化。
2. vue-cli命令行创建，具体操作可以参考官网教程uni-app官网

运行

1. 在手机上运行时，手机会先进行检查，然后会自动下载Hbuilder手机运行软件，然后项目就可以在手机上打开了。
2. 运行到微信开发者工具上，注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。
   

组件引用

1. 拿下载vant组件做案例，在官网的插件市场进行组件下载，
   
2. 下载好之后，并解压
   
3. 项目引入组件，因为vant-weapp是微信小程序的，所以在项目根目录新建 wxcomponets 文件夹用来存放小程序组件，这一点在uni-app官方的目录结构就有说明
   
4. 把git 下载 vant-weapp 最新源代码，并将dist目录拷贝到新建的wxcomponents目录下
5. page.json配置

{
"pages": [
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "vant-weapp",
             // 使用小程序组件
            "usingComponents": {
                "van-button": "/wxcomponents/vant-weapp/button/index"
            }
        }
    }
]
}

6. 最后就可以使用vant weapp组件了。大家参考 vant Weapp 组件库使用的，这样可以提高工作效率。