html中載入vue元件的正確姿勢
阿新 • • 發佈：2020-08-25
http-vue-loader
直接從html / js載入.vue檔案。沒有node.js環境，沒有構建步驟。
示例
這是一個vue檔案：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>
利用http-vue-loader外掛，在index.html檔案中使用my-component.vue檔案
<!doctype html> <html lang="en"> <head> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/http-vue-loader"></script> </head> <body> <div id="my-app"> <my-component></my-component> </div> <script type="text/javascript"> new Vue({ el: '#my-app', components: { 'my-component': httpVueLoader('my-component.vue')//載入需要使用的vue檔案 } }); </script> </body> </html>