uniapp がインポートを使用できない場合はどうすればよいですか?

Uniapp は、開発者が Vue 構文を使用して、小さなプログラム、H5 Web ページ、APP などの複数の端末を迅速に開発できるクロスターミナル フレームワークです。しかし、時々 uniapp がインポートを使用できないという問題に遭遇し、不便をもたらします。この記事では、この問題の原因と解決策を紹介します。

まず、概念を明確にする必要があります。uniapp は Vue 構文に基づいて開発されたフレームワークですが、完全な Vue フレームワークではありません。これは、uniapp は Vue の構文のほとんどをサポートしていますが、すべての Vue 構文を uniapp で使用できるわけではないことを意味します。

uniapp を使用して開発する場合、通常、インポートを使用して外部ライブラリまたはコンポーネントをインポートできないという問題が発生します。たとえば、uniapp プロジェクトで element-ui UI コンポーネント ライブラリを使用したい場合は、Vue の使用方法に従って import を使用してコンポーネントをインポートします。

import { Button } from 'element-ui'

export default {
  components: {
    Button
  }
}

ただし、実行しようとすると、このコードを実行すると、コンソールに次のエラーが報告されることがわかります。

Module build failed: Error: 'import' and 'export' may only appear at the top level (1:0)
You may need an appropriate loader to handle this file type.
| import { Button } from 'element-ui'
| 
| export default {

このエラーは、「インポート」と「エクスポート」がファイルの先頭にのみ記述できることを意味します。これは、uniapp のコンパイル方法が Vue とは異なるためです。コンパイル プロセス中に、uniapp はコンポーネントを対応する小さなプログラムや H5 Web ページなどの異なる部分にコンパイルします。Vue のようにすべてのコンポーネントを 1 つのファイルにコンパイルすることはできません。したがって、import を使用してコンポーネントをインポートすると、コンパイルが失敗します。

それでは、この問題をどうやって解決すればいいのでしょうか?いくつかの方法があります。

1. require を使用する

require は、すべての種類のファイルをインポートするために使用できる Node.js のグローバル関数です。 require を使用してコンポーネントをインポートし、それを uniapp コンポーネントとして登録できます。

const { Button } = require('element-ui')

export default {
  components: {
    'el-button': Button
  }
}

この例では、require を使用して Button コンポーネントをインポートし、それを uniapp コンポーネントとして登録します。 uniapp では、コンポーネント名はアンダースコアで区切られた小文字の文字列である必要があるため、コンポーネント名として「el-button」を使用することに注意してください。

2. ページ上で直接使用する

コンポーネントを 1 つのページ内でのみ使用する必要がある場合は、コンポーネントをページ上に直接導入して使用することもできます。コンポーネントに登録する必要はありません:

<script>
  import 'element-ui/lib/theme-chalk/button.css'

  export default {
    methods: {
      handleClick () {
        this.$message('Hello world')
      }
    }
  }
</script>

<template>
  <el-button @click="handleClick">Click Me</el-button>
</template>

この例では、Button コンポーネントをコンポーネントに登録する必要はなく、ページ上で直接使用できます。外部コンポーネントを使用する場合、コンポーネントに対応する CSS ファイルを最初に導入する必要があることに注意してください。そうしないと、コンポーネントのスタイルが適用されません。

3. コンポーネントをモジュールにパッケージ化する

コンポーネントを複数のページで使用する必要がある場合は、コンポーネントをモジュールにパッケージ化して、それを他のページにインポートできます。 。まず、既存の uniapp プロジェクトに外部コンポーネントを保存するための新しいフォルダーを作成する必要があります。

├── components/
│   ├── my-component/
│   ├── ...
│   └── index.js
├── pages/
└── uni.scss

コンポーネント フォルダーの下に、保存する my-component という名前のフォルダーを作成します。 外部コンポーネントの場合は、index.js を作成します。このフォルダー内のファイルを使用してコンポーネントをエクスポートします。

// components/my-component/index.js

import MyComponent from './MyComponent.vue'

export default {
  install (Vue) {
    Vue.component('my-component', MyComponent)
  }
}

この例では、MyComponent をコンポーネントとして登録し、install メソッドを使用してモジュールとしてエクスポートします。次に、コンポーネントを使用する必要があるページで、script タグにモジュールを直接導入するだけです:

<script>
  import MyComponent from '@/components/my-component'

  export default {
    components: {
      MyComponent
    }
  }
</script>

この例では、import を使用してコンポーネント モジュールをインポートし、それを uniapp コンポーネントとして登録します。 。モジュールを使用する場合、コンポーネント名には常にモジュール名を使用する必要があることに注意してください。たとえば、「MyComponent」の代わりに「my-component」を使用します。

概要

import を使用して外部コンポーネントをインポートすることは、uniapp では直接使用できませんが、require を使用するか、ページ上で直接使用するか、コンポーネントをモジュールにパッケージ化することで、この問題を解決できます。実際の開発では、開発効率とコードの保守性を向上させるために、プロジェクトのニーズに応じてコンポーネントの使用方法を使い分ける必要があります。

以上がuniapp がインポートを使用できない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。