本文介绍了如何在不使用vue-cli的情况下，在普通web项目中引入Vue.js并创建自定义组件。首先，可以通过直接引入vue.js文件实现Vue的基本应用。然后，展示了如何通过http-vue-loader来加载.vue文件，以实现组件的模块化，从而解决template内容过多导致的代码结构不清晰问题。通过创建.vue文件，可以更好地组织和维护组件代码。
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')
}
});
扫一扫
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
