uni-app使用全局组件及相关问题

HBuilderX：2.9.8

Vue全局组件使用：

1. main.js

import Vue from 'vue'
import App from './App'
import store from '@/store/index'
import GlobalComponent from '@/components/global'


Vue.config.productionTip = false
App.mpType = 'app'

Vue.use(GlobalComponent);

const app = new Vue({
	store,
	...App
})
app.$mount()

组件多，就直接放在了一个js文件中

2. /components/global.js

import Card from './uni-card/uni-card.vue'
import CardHead from './uni-card-h/uni-card-h.vue'
import CardBody from './uni-card-b/uni-card-b.vue'

const component = {
	'uni-card': Card,
	'uni-card-h': CardHead,
	'uni-card-b': CardBody,
}

export default {
	install(Vue) {
		for (const name in component) {
			Vue.component(name, component[name])
		}
	}
}

看到最后o！

Q1. 组件不生效：

一开始目录结构是如下，手机端的全局组件并没有生效，电脑浏览器正常；

-|  uni-card

        -|  uni-card.vue

        -|  uni-card-h.vue

        -|  uni-card-b.vue

将目录结构修改为如下，手机端的全局组件正常生效

-|  uni-card

        -|  uni-card.vue

-|  uni-card-h

        -|  uni-card-h.vue

-|  uni-card-b

        -|  uni-card-b.vue

---

uni-app

写完上面的代码后，发现有一个组件，没有既全局引入，也没有在vue中引入，居然可以直接使用；然后将上面全局引入的代码注释掉，居然仍然可以正常使用；

查找资料发现：HBuilderX 2.5.5起支持easycom组件模式

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 如下：

<template>
    <view class="container">
        <uni-list>
            <uni-list-item title="第一行"></uni-list-item>
            <uni-list-item title="第二行"></uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

组件库批量安装，随意使用，自动按需打包。以官方的uni-ui为例，在HBuilderX新建项目界面选择uni-ui项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。