发现网上vue的组件都是使用管理包工具然后解析的，但是有的项目是不使用管理工具而是直接引用vue.js的，因此使用组件比较麻烦。因此我整理了一下不使用webpack+vue-cli做vue项目引用组件的办法。
//首先引用vue.js文件以及jq--cdn（cdn.jsdelivr.net/npm）网站可以获取最…
第一种的方法在当前页面中使用组件并且挂载
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="" id="vue-template">
<ul>
<li v-for="(site, i) in testContent">
<my-component v-model="testContent[i]" :value='testContent' @blurFunc="blurHighLight"></my-component>
</li>
</ul>
</div>
//把组件的模板写在template中是因为template是H5的一种组件使用它在里面写代码并不会运行而且在编辑器和浏览中都可以解析但不会使用相当于字符串但是比字符串方便多了
<template class="template">
<div class="div-editable" v-html="innerText" ></div>
</template>
</body>
<script type="text/javascript">
//也可以使用字符串充当vue的template
//var template = '<div class="div-editable" v-html="innerText" ></div>';
var template = $('.template').html();
//Vue.extend创建组件
var MyComponent = Vue.extend({
template: template,
data() {
return {
innerText: '哈哈哈哈',
isChange: true
}
},
});
/*全局注册组件*/
Vue.component('my-component', MyComponent);
//在Vue的实例中挂载组件就可以使用了
var app = new Vue({
el: '#vue-template',
data: {
testContent: ['dreamsqin1', 'dreamsqin3', 'dreamsqin4']
},
components: {
MyComponent
},
})
</script>
第二种方法 template仍然写在当前页面但是组件js可以提出去写成模块使用export导出
//组件js文件（ceshiMode.js） template可以直接写字符串但是不能换行很不方便，export可以不用直接使用变量或者常亮都行
const zujian = {
template: '',
data() {
return {
innerText: this.value,
isChange: true
}
},
}
export default {zujian}
在vue实例的页面中使用es6 import 引用组件js文件
//使用export和import的时候script标签的type类型必须为module否则浏览器报错
<script type="module">
import ceshiMode from './page/ceshiMode.js';
var template = $('.template').html();
ceshiMode.zujian.template = template;
var MyComponent = Vue.extend({ceshiMode});
//剩下的就和第一种方法相同
</script>
第三种方法可以吧组件模板，和组价的js文件都踢出去
<script type="module">
//组件js依然使用import导入
import ceshiMode from './page/ceshiMode.js';
//模板使用jq的load的导入或者ajax导入都可以其实浏览器有个原生组件HTML Imports可以直接导入的，但是废弃的
$(".guodu").load("page/model.vue",function(response,status,xhr){
console.log(response)
ceshiMode.zujian.template = response;
MyComponent = Vue.extend(ceshiMode.zujian);
})
//需要注意的是load和ajax都是一部请求因此Vue的实例的创建也是需要异步的写一个定时器就可以了
</script>
