關於uniapp引入組件不顯示

目錄結構

 

├─ page
    ├─ index
    ├─ ├─ js
    ├─ ├─ ├─ index.js
    └─ index.vue

本着js和模板分離的思想去做項目的，js相關代碼放到index.js裏

js/index.js

 

import uniList from '@/components/uni-ui/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';

export default {
  name: 'index',
  components: {
    uniList,
    uniListItem
  }
}

index.vue

 

<template>
  <view>
    <uni-list>
      <uni-list-item title="標題文字" show-arrow="false"></uni-list-item>
      <uni-list-item title="標題文字"></uni-list-item>
      <uni-list-item title="標題文字" show-badge="true" badge-text="12"></uni-list-item>
      <uni-list-item title="禁用狀態" disabled="true" show-badge="true" badge-text="12"></uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import index from './js/index.js';
export default index;
</script>

也沒報錯，也能打印出組件，但就是不顯示，很奇怪，查了問了想了好久，最終嘗試了不使用index.js，直接在index.vue裏引入的方式，誰知還真的行，代碼下如：

 

<template>
  <view>
    <uni-list>
      <uni-list-item title="標題文字" show-arrow="false"></uni-list-item>
      <uni-list-item title="標題文字"></uni-list-item>
      <uni-list-item title="標題文字" show-badge="true" badge-text="12"></uni-list-item>
      <uni-list-item title="禁用狀態" disabled="true" show-badge="true" badge-text="12"></uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import uniTag from "@/components/uni-ui/uni-tag/uni-tag.vue";
import uniList from '@/components/uni-ui/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
export default {
  name: 'member_center',
  components: {
    uniTag,
    uniList,
    uniListItem
  }
}
</script>

一個讓我頭疼了很久的問題，就這樣解決了，懵了，可能是uniapp或小程序做的限定吧