前言
uni-app-cli 脚手架，方便快速开发。
1. uni-app使用Vant组件
Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
目前 Vant 官方提供了Vue 版本和微信小程序版本（Vant-weapp）, 并由社区团队维护 React 版本
1.1 使用步骤
1）在项目根目录下新建 wxcomponents 目录 ，此目录应该与components 目录同级。
2）直接通过 git 下载 vant-weapp 最新源代码，并将dist目录拷贝到新建的wxcomponents目录下，并重命名dist为vant-weapp。
仓库地址：gitee.com/vant-contri…
下载：git clone github.com/youzan/vant…
3）在App.vue中引入公共样式
3）在
pages.json的globalStyle中 引入所需要的组件
注意：在globalStyle中配置是所有页面都能使用，如下：
注意：某个page的style中配置是仅在当前页面使用，如下：
4）注意事项
Vant组件中Notify 消息提示比较特殊
不仅需要在pages.json的globalStyle中 引入还需要再main.js中添加到vue原型上
import Notify from './wxcomponents/vant-weapp/notify/notify';
Vue.prototype.$notify = Notify
然后在页面使用
<template>
<view class="body">
首页
<vant-button type="primary" size="small" @click="showNotify">vant-weapp</vant-button>
<vant-notify id="van-notify" />
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
showNotify() {
this.$notify({ type: 'primary', message: '这是vant-weapp的使用方法~' });
},
onShow(){
}
}
</script>
<style lang="scss" scoped>
</style>
2. uni-app使用iconfont
首先登陆iconfont官网，创建自己的项目，找到需要的图标加入购物车，然后添加到项目中
然后找到图标管理，我的项目，生成unicode ,点击下载至本地，解压
将解压后的iconfont.css引入到common文件夹下，将iconfont.css文件内url路径转换为在线路径即加上https:
使用时在App.vue中全局引入该文件@import "./common/iconfont.css";（根据该文件路径），即可以在各页面中使用
