uniap

文章目录

• 前言
• 一、uni-ui是什么？
• 二、参考文档
  • 1.实例1(直接导入)
  • 2.实例2(使用npm导入)

---

前言

好记性不如烂笔头。最近在学习uniapp，顺便记录下学习过程。

---

一、uni-ui是什么？

 uni-ui是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

 uni-ui不包括基础组件，它是基础组件的补充。

二、参考文档

1.uniapp文档:uni-app官网

2.uni-ui文档:uni-ui - DCloud 插件市场

1.实例1(直接导入组件,以uniCalendar为例)

如下（示例）：

1.进入https://ext.dclound.net.cn/plugin?id=55
2.选择[使用HBuilderX导入插件](图1)-选择要导入的项目(图2)-等待下载完成
    

3.引入项目中的目为(也可新建components文件夹 把需要使用的uni-ui组件单独放置，使用时修改import地址为(以uni-badge为例) import uniBadge from '@/components/uni-badge/components/uni-badge/uni-badge.vue')

4.代码中使用

<template>
	<view class="content">
		<uni-calendar 
		    :insert="true"
		    :lunar="true" 
		    :start-date="'2019-3-2'"
		    :end-date="'2019-5-20'"
		    @change="change"
		     />
	</view>
</template>

<script>
	import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

2.实例2(使用npm导入组件,以uniCalendar为例)

如下（示例）：

1.进入项目根目录使用

npm install @dcloudio/uni-ui

2.若提示文件找不到 @dcloudio/uni-i18n。

使用

npm install @dcloudio/uni-i18n

2.在代码中使用

<template>
	<view class="content">
		<uni-calendar 
		    :insert="true"
		    :lunar="true" 
		    :start-date="'2019-3-2'"
		    :end-date="'2019-5-20'"
		    @change="change"
		     />
	</view>
</template>

<script>
	import {uniCalendar } from '@dcloudio/uni-ui'
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

效果:

---