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

电玩女神 2022-12-30 07:37 309阅读 0赞

> **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-app ##

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

查找资料发现：**`HBuilderX 2.5.5`**起支持**[easycom组件模式][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，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。

[easycom]: https://uniapp.dcloud.io/collocation/pages?id=easycom