html页面引入vue组件
html页面引入vue组件需要在页面引入http-vue-loader.js
注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html
1.创建my-component.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | < 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <! 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 >// 引入组件 可以这样引入 |
components: {
'my-component': httpVueLoader('/pub/my-component.vue')
},
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签