javascript - How to write vue components

Question

The project is going to use Vue. The project time is tight and it is my first time to come into contact with Vue, so I don’t understand many things.
Here I would like to ask how the components should be written if the vue-cli tool and webpack are not used? Because most of the writing methods I see on the Internet are single-page writing methods. Write a component as a file in the .vue suffix format and then combine it. If it is not written in this format, how should the component be written? Then how to reuse it in every html page?

I saw an example of a grid component on the official website:

But I don’t know how to reuse it in different html pages. The structure is the same, but the data is different. I just treat it as a template

Answer 1

If you don’t use vue-cli, you can write a js component, and then import this js file into the page.

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

I was also studying this issue two days ago! Found an exclusive new way to implement components without vue-cli and webpack. The biggest advantage is that components can be styled!
Using a js technique of outputting multi-line text through comments.
Single file component