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