Apakah yang perlu saya lakukan jika uniapp tidak boleh menggunakan import?

Uniapp ialah rangka kerja merentas terminal yang membolehkan pembangun menggunakan sintaks Vue untuk membangunkan berbilang terminal dengan pantas seperti program kecil, halaman web H5 dan APP. Walau bagaimanapun, kadangkala kami menghadapi masalah bahawa uniapp tidak boleh menggunakan import, yang membawa kesulitan kepada kami. Artikel ini akan memperkenalkan punca dan penyelesaian masalah ini.

Pertama sekali, kita perlu menjelaskan konsep: uniapp ialah rangka kerja yang dibangunkan berdasarkan sintaks Vue, tetapi ia bukan rangka kerja Vue yang lengkap. Ini bermakna walaupun uniapp menyokong kebanyakan sintaks Vue, tidak semua sintaks Vue boleh digunakan dalam uniapp.

Apabila membangun dengan uniapp, kami biasanya menghadapi masalah bahawa perpustakaan atau komponen luaran tidak boleh diimport menggunakan import. Sebagai contoh, jika kami ingin menggunakan perpustakaan komponen UI elemen-ui dalam projek uniapp, kami akan menggunakan import untuk mengimport komponen mengikut cara Vue digunakan:

import { Button } from 'element-ui'

export default {
  components: {
    Button
  }
}

Walau bagaimanapun, apabila kami mencuba untuk menjalankan ini Apabila pengekodan, anda akan mendapati bahawa konsol melaporkan ralat berikut:

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 {

Maksud ralat ini ialah "import" dan "eksport" hanya boleh ditulis di bahagian atas fail. Ini kerana kaedah kompilasi uniapp adalah berbeza daripada kaedah kompilasi semasa proses penyusunan, uniapp akan menyusun komponen ke dalam program kecil yang sepadan, halaman web H5 dan bahagian lain yang berbeza. Oleh itu, menggunakan import untuk mengimport komponen akan menyebabkan penyusunan gagal.

Jadi, bagaimana untuk menyelesaikan masalah ini? Terdapat beberapa cara:

1. Gunakan memerlukan

require ialah fungsi global dalam Node.js yang boleh digunakan untuk mengimport semua jenis fail. Kami boleh menggunakan require untuk mengimport komponen, dan kemudian mendaftarkannya sebagai komponen uniapp:

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

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

Dalam contoh ini, kami menggunakan require untuk mengimport komponen Button, dan kemudian mendaftarkannya sebagai komponen uniapp. Perlu diingat bahawa dalam uniapp, nama komponen mestilah rentetan huruf kecil yang dipisahkan dengan garis bawah, jadi kami menggunakan 'el-button' sebagai nama komponen.

2. Gunakannya terus pada halaman

Jika kita hanya perlu menggunakan komponen dalam satu halaman, kita juga boleh memperkenalkan komponen terus pada halaman dan menggunakannya , tidak perlu Mendaftar dalam komponen:

<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>

Dalam contoh ini, kita tidak perlu mendaftarkan komponen Button dalam komponen, kita boleh menggunakannya terus pada halaman. Perlu diingatkan bahawa apabila menggunakan komponen luaran, fail CSS yang sepadan dengan komponen perlu diperkenalkan terlebih dahulu, jika tidak gaya komponen tidak akan digunakan.

3. Membungkus komponen ke dalam modul

Jika kita perlu menggunakan komponen dalam berbilang halaman, kita boleh membungkus komponen ke dalam modul dan kemudian mengimportnya dalam modul halaman lain. Pertama, kita perlu mencipta folder baharu dalam projek uniapp sedia ada untuk menyimpan komponen luaran:

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

Di bawah folder komponen, kami mencipta folder bernama my-component Untuk menyimpan komponen luaran, cipta indeks. js dalam folder ini untuk mengeksport komponen:

// components/my-component/index.js

import MyComponent from './MyComponent.vue'

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

Dalam contoh ini, kami mendaftarkan MyComponent sebagai komponen dan mengeksportnya sebagai modul menggunakan kaedah pemasangan . Kemudian, dalam halaman yang perlu menggunakan komponen, kami hanya perlu memperkenalkan modul terus dalam teg skrip:

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

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

Dalam contoh ini, kami menggunakan import untuk mengimport modul komponen dan mendaftarkannya sebagai Komponen uniapp. Perlu diingatkan bahawa apabila menggunakan modul, nama komponen hendaklah sentiasa menggunakan nama modul, contohnya, gunakan 'my-component' dan bukannya 'MyComponent'.

Ringkasan

Menggunakan import untuk mengimport komponen luaran tidak boleh digunakan secara langsung dalam uniapp, tetapi kami boleh menyelesaikan masalah ini dengan menggunakan memerlukan, menggunakannya terus pada halaman, atau membungkus komponen ke dalam modul. Dalam pembangunan sebenar, kita harus memilih kaedah yang berbeza untuk menggunakan komponen mengikut keperluan projek untuk meningkatkan kecekapan pembangunan dan kebolehselenggaraan kod.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika uniapp tidak boleh menggunakan import?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!