uni-app-cli脚手架，方便快速开发-一一网

前言

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>
复制代码