html页面引入vue组件需要在页面引入http-vue-loader.js
注意：要查看页面引入vue组件的效果不能直接在本地打开index.html，会有跨域问题，可以在本地配置一个nginx转发，再用浏览器访问http://localhost:port/index.html
1.创建my-component.vue
<template> <div class="hello">Hello {{who}}</div> </template> <script> module.exports = { data: function() { return { who: 'world' } } } </script> <style> .hello { background-color: #ffe; } </style>
2.创建index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 先引入 Vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入 http-vue-loader --> <script src="https://unpkg.com/http-vue-loader"></script> </head> <body> <div id="app"> <my-component></my-component> </div> </body> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> // 使用httpVueLoader Vue.use(httpVueLoader);
new Vue({ el: '#app', data: function () { return { visible: false } }, components: { // 将组建加入组建库 'my-component': 'url:./component/my-component.vue' } }) </script> </html>
注意：要查看页面引入vue组件的效果不能直接在本地打开index.html，会有跨域问题，可以在本地配置一个nginx转发，再用浏览器访问http://localhost:port/index.html
httpVueLoader的其他组件载入方式可查看：https://www.npmjs.com/package/http-vue-loader