javascript - Bagaimana untuk menulis komponen vue

Question

Projek ini akan menggunakan Vue Masa projek adalah ketat dan ini adalah kali pertama saya berhubung dengan Vue, jadi saya tidak faham banyak perkara.
Di sini saya ingin bertanya bagaimana komponen harus ditulis jika alat vue-cli dan webpack tidak digunakan? Kerana kebanyakan kaedah penulisan yang saya lihat di Internet adalah kaedah penulisan satu halaman Tulis komponen sebagai fail dalam format akhiran .vue dan kemudian gabungkannya Jika ia tidak ditulis dalam format ini, bagaimanakah komponen itu harus ditulis ? Kemudian bagaimana untuk menggunakannya semula dalam setiap halaman html?

Saya melihat contoh komponen grid di laman web rasmi:

Tetapi saya tidak tahu cara menggunakannya semula dalam halaman html yang berbeza Strukturnya adalah sama, tetapi datanya berbeza

Answer 1

Jika anda tidak menggunakan vue-cli, anda boleh menulis komponen js, dan kemudian mengimport fail js ini ke dalam halaman.

// video-fitler.component.js

Vue.component('video-filter',{
  props:{
    videoLists:{
      type:Array,
      required:true
    },
    loading:{
      type:Boolean,
      default:false,
    },
    currentPage:{
      required:true,
      type:Number,
      default:1,
    },
    totalCount:{
      type:Number,
      required:true
    },
    radioName:{
      type:String,
      default:'mediaId'
    }
  },
  template:'<p v-loading="loading">'+
  '                        <p v-show="!loading" v-if="videoLists.length">'+
  '                          <table  class="table">'+
  '                            <tbody id="video-tbody">'+
  '                            <tr v-for="video in videoLists" :key="video.id">'+
  '                              <td><input type="radio" :name="radioName" :value="video.id"></td>'+
  '                              <td>{{video.name}}</td>'+
  '                            </tr>'+
  '                            </tbody>'+
  '                          </table>'+
  '                          <el-pagination'+
  '                                  layout="prev, pager, next"'+
  '                                  :current-page="currentPage"'+
  '                                  :page-size="10"'+
  '                                  :total="+totalCount"'+
  '                                  @current-change="searchVideo"'+
  '                                  class="table-center">'+
  '                          </el-pagination>'+
  '                        </p>'+
  '                        <p v-else class="text-danger mvs">未搜索到您要查找的内容！</p>'+
  '                      </p>',
  methods:{
    searchVideo:function (page) {
      this.$emit('current-change',page);
    }
  }
})

Answer 2

Saya juga sedang mengkaji isu ini dua hari lalu! Menemui cara baharu yang eksklusif untuk melaksanakan komponen tanpa vue-cli dan webpack Kelebihan terbesar ialah komponen boleh digayakan!
Menggunakan teknik js untuk mengeluarkan teks berbilang baris melalui ulasan.
Komponen fail tunggal

.