javascript - vue元件的寫法

Question

專案準備用vue，專案時間緊迫，又是第一次接觸vue，所以很多地方有不明白的。
這裡我想問下如果不用vue-cli工具和webpack的話，元件應該是怎麼寫的呢？因為我網路上看到大部分的寫法都是單頁那種寫法，把一個元件寫成 .vue後綴格式的文件，然後組合起來，如果不寫成這種格式的話組件該怎麼寫呢？然後怎麼在每個html頁面重複使用？

我看到官網範例那有一個網格元件的範例：

但我不知道應該怎麼去在不同html頁面去複用它，就是結構是相同的，只是資料不一樣，就是把它當成是一個模板

Answer 1

不用vue-cli的話可以寫一個js元件,然後頁面引入這個js檔案。

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

我前兩天也在研究這個問題！ 發現了一個獨家新方法實現組件, 不用vue-cli和webpack, 最大的好處是組件可以帶樣式 !
利用了一個js通過註釋輸出多行文本的技巧.
單文件組件