vue中使用普通html页面,普通html页面怎么引入.vue文件呢？

html页面引入vue组件需要在页面引入http-vue-loader.js

注意：要查看页面引入vue组件的效果不能直接在本地打开index.html，会有跨域问题，可以在本地配置一个nginx转发，再用浏览器访问http://localhost:port/index.html

1.创建my-component.vue

Hello {{who}}

module.exports = {

data: function() {

return {

who: 'world'

}

}

}

.hello {

background-color: #ffe;

}

2.创建index.html

// 使用httpVueLoader

Vue.use(httpVueLoader);

new Vue({

el: '#app',

data: function () {

return { visible: false }

},

components: {

// 将组建加入组建库

'my-component': 'url:./component/my-component.vue'

}

})

注意：要查看页面引入vue组件的效果不能直接在本地打开index.html，会有跨域问题，可以在本地配置一个nginx转发，再用浏览器访问http://localhost:port/index.html