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通过注释输出多行文本的技巧.
单文件组件