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

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

1.创建my-component.vue

  1. <template>
  2.     <div class="hello">Hello {{who}}</div>
  3. </template>
  4.  
  5. <script>
  6. module.exports = {
  7.     data: function() {
  8.         return {
  9.             who: 'world'
  10.         }
  11.     }
  12. }
  13. </script>
  14.  
  15. <style>
  16. .hello {
  17.     background-color: #ffe;
  18. }
  19. </style>

2.创建index.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <!-- 引入样式 -->
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <!-- 先引入 Vue -->
  9.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  10.     <!-- 引入 http-vue-loader -->
  11.     <script src="https://unpkg.com/http-vue-loader"></script>
  12. </head>
  13.  
  14. <body>
  15.     <div id="app">
  16.         <my-component></my-component>
  17.     </div>
  18. </body>
  19.  
  20. <!-- 引入组件库 -->
  21. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  22. <script>
  23.     // 使用httpVueLoader
  24.     Vue.use(httpVueLoader);
  25.     new Vue({
  26.         el: '#app',
  27.         data: function () {
  28.             return { visible: false }
  29.         },
  30.         components: {
  31.             // 将组建加入组建库
  32.             'my-component': 'url:./component/my-component.vue'
  33.         }
  34.     })
  35. </script>
  36.  
  37. </html>

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

httpVueLoader的其他组件载入方式可查看：https://www.npmjs.com/package/http-vue-loader

html页面引入vue组件的更多相关文章

  1. 不再手写import - VSCode自动引入Vue组件和Js模块

    :first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...

  2. iview table icon dorpdown html页面级别vue组件 #vuez#

    iview table icon dorpdown html页面级别vue组件 <!DOCTYPE html> <html> <head> <meta cha ...

  3. 想在已创建的Vue工程里引入vux组件

    <1>. 在项目里安装vux npm install vux --save <2>. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误) npm ...

  4. require.js 加载 vue组件 r.js 合并压缩

    https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...

  5. vue 组件间传值方式

    /* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2.在子组件里 ...

  6. 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...

  7. vue单页面引入CDN链接

    不想在index.html文件中全局引入CDN资源,那么如何在Vue单文件组件中引入?下面来瞅瞅~ 虚拟DOM创建 Vue 通过创建一个虚拟 DOM 来追踪自己要改变的真实 DOM 什么是虚拟DOM? ...

  8. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  9. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

随机推荐

  1. CSS中@import url()

    @import url( )总结: 1.import url( )机制是不同于link的,link是在加载页面前把CSS加载完毕,而@import url( )则是读取完文件后加载,所以会出现一开始没 ...

  2. php json_encode()函数返回对象和数组问题

    php json_encode() 函数格式化数据时会根据不同的数组类型格式化不同类型的json数据 索引数组时 <?php $arr = [1,2,3,4,5]; print_r(json_e ...

  3. vue进入页面时不在顶部，检测滚动返回顶部按钮

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll& ...

  4. 记一次渗透某XX站

    0X00 前言 团队A师傅发来个站,问我有没有得搞 正好在搞其他的站,卡住了,开干换个思路. 0x01 信息收集 开burp抓了下包,目标设置了url重写,开了报错,我们随意输入一个控制器就直接报错. ...

  5. idea 实用插件

    尊重劳动成果,本插件的整理原文出自:https://blog.csdn.net/weixin_41846320/article/details/82697818,感谢老铁的辛苦原创. 插件安装方式: ...

  6. oracle trunc函数用法

    转自:https://www.e-learn.cn/content/qita/699481 /**************日期********************/ select trunc(sy ...

  7. laravel withCount 统计关联数量

    roleModel定义关联 hasmany  public function users(){ return $this->hasMany('App\Models\Users', 'role_i ...

  8. Shell 脚本操作数据库实战

    安装mariadb 数据库  (默认没有密码,直接mysql即可进入数据库管理控制台) yum install mariadb mariadb-server mariadb-libs -y syste ...

  9. [TCP/IP][distributed] proxy protocol 是什么

    问题描述: 在Web分布式系统中,一般会搭建复杂的load blance系统来提供高性能的web服务. load blance有4层网络的,也有7层网络的.再经过这样的分布式网络之后,后面真正提供服务 ...

  10. awk初级教程

    参考:sed & awk 概述 sed & awk指令组成 与sed区别 尽管awk指令与sed指令的结构相同,都由模式和过程两部分组成,但过程本身有很大不同. awk看上去不像编辑器 ...