html引入vue子组件,怎么直接引入vue.js？

vue的使用一般有两种方式：一种是使用脚手架工具vue-cli；二是直接在项目引入vue.js

直接在项目引入vue.js的方法

普通web项目中可嵌入vue使用，仅需将vue的js引入页面即可，例子如下：

{{msg}}}

new Vue({

el: '#app',

data: function () {

return {

msg:"Hello world!"

}

}

});

在普通web项目中，如果我们想自定义组件，按官方文档的写法如下：// 定义一个名为 button-counter 的新组件

Vue.component('button-counter', {

data: function () {

return {

count: 0

}

},

template: 'You clicked me {{ count }} times.'

})

但是此方法有一些不友好的地方，如果我们模板内容过大，则 template 内容会比较多，而且对代码整体的结构不太友好，因此我们希望通过新建.vue文件的形式来自定义组件。

http-vue-loader组件实现了不需要编译和build即可加载vue组件，具体使用方式如下：

1、创建自定义组件文件，如 my-component.vue ，内容如下：

{{msg}}

module.exports = {

data: function() {

return {

msg: 'Hello world!'

}

}

}

.hello {

background-color: #ffe;

}

2、在网页上引入vue 和 http-vue-loader的js文件

组件下载地址：https://download.csdn.net/download/ajian132/12054208 (可直接引入项目使用)

3、在网页上通过httpVueLoader载入子组件

new Vue({

el: '#app',

components: {

'my-component': httpVueLoader('components/my-component.vue')

}

});