# 快速上手

# 如何使用

通过npm和下载方式的配置之后，在某个页面可以直接使用组件，无需通过import引入组件。

<template>
  <up-action-sheet :actions="list" v-model:show="show"></up-action-sheet>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  {
    text: '点赞',
    color: 'blue',
    fontSize: 28
  },
  {
    text: '分享'
  },
  {
    text: '评论'
  }
]);

const show = ref(true);
</script>

<template>
	<up-action-sheet :actions="list" v-model="show"></up-action-sheet>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					text: '点赞',
					color: 'blue',
					fontSize: 28
				}, {
					text: '分享'
				}, {
					text: '评论'
				}],
				show: true
			}
		}
	}
</script>

# 关于uni.$u

从1.7.9开始，uview-plus将$u对象同时挂载到了uni对象上，这意味着您可以在外部的js文件中，通过uni.$u.xxx的形式去调用uview-plus提供的一些工具方法，而不再像从前一样必须在*.vue中通过uni.$u.xxx的形式调用。

# 如何不使用easycom而单独引用某一个组件

某些情况下，您可能不想通过easycom引用组件(虽然我们极力推荐您使用easycom)，那么您可以使用import这个常规的引入方式，如下：

<template>
	<up-action-sheet :actions="list" v-model="show"></up-action-sheet>
</template>

<script setup>  
import { ref } from 'vue';  
import upActionSheet from "uview-plus/components/up-action-sheet/up-action-sheet.vue";  
  
// 定义响应式数据  
const list = ref([  
	{  
		text: '点赞',  
		color: 'blue',  
		fontSize: 28  
	},  
	{  
		text: '分享'  
	},  
	{  
		text: '评论'  
	}  
]);  
  
const show = ref(true);  
</script>

<script>
	import upActionSheet from "uview-plus/components/up-action-sheet/up-action-sheet.vue";
	export default {
		components: {
			uActionSheet
		},
		data() {
			return {
				list: [{
					text: '点赞',
					color: 'blue',
					fontSize: 28
				}, {
					text: '分享'
				}, {
					text: '评论'
				}],
				show: true
			}
		}
	}
</script>

# 关于uview-plus组件的esaycom规则可能和其他组件引入名称冲突的问题(4.x无此问题)

uview-plus的组件引入是通过easycom形式的，写在pages.json中，以up-开头，这可能和其他UI组件，或者uni-app插件市场的uParse修复版-html富文本加载 (opens new window)组件名冲突而报错， 原因是此uParse的组件引用名为u-parse，也是u-开头，即使您在页面中显式地配置了组件引入，但uni-app仍认为easycom配置的规则优先级比页面引入的组件规则高。

以下为uParse第三方插件的官方写法：

<template>
    <up-parse :content="xxx"></up-parse>
</template>

<script setup>  
import uParse from '@/components/gaoyia-parse/parse.vue';  
</script>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		 components: {
			uParse
		 }
	}
</script>

可以看到，上方虽然通过import声明了此组件，最终引用的组件名称为<up-parse>("u-"开头)，但是uni-app仍然忽视了，而认为uview-plus在pages.json配置的easycom规则的优先级更高，因而去uview-plus的组件库 中查找u-parse，因为找不到而报错，这是不合理的。

解决办法也很简单，给冲突的插件换一个名字即可，比如上面的uParse插件，我们在import和components声明的时候换一个名字即可，比如这里让其为字母a开头：

<template>
    <a-parse :content="xxx"></a-parse>
</template>

<script setup>  
import aParse from '@/components/gaoyia-parse/parse.vue';  
</script>

<script>
	// 记得同时修改引入的名称，以及components中的名称
	import aParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		 components: {
			aParse
		 }
	}
</script>