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

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. 什么叫工业4.0，这篇接地气的文章终于讲懂了（ZT）

    原地址:https://www.cnblogs.com/namei/p/6110382.html 笔者早年从事过工业自动化行业,后来去了几个城市,讲过<工业互联网与工业文明史>这门课,以至 ...

  2. 写在NOIP2018前

    不知不觉距离NOIP2018还有两天,两个月的停课生活即将结束 此时心里总感觉装着许多话,想要将其倾诉却发现连哪怕一句也凝结不出 只觉得这两月像是场荒诞的冒险,好像我想做的什么都做了,又感觉我其实一事 ...

  3. 【转载】C#中使用OrderBy和ThenBy等方法对List集合进行排序

    在C#的List操作中,针对List对象集合的排序我们可以使用OrderBy.OrderByDescending.ThenBy.ThenByDescending等方法按照特定的对象属性进行排序,其中O ...

  4. hive分区理念介绍

    一.背景 1.在Hive Select查询中一般会扫描整个表内容,会消耗很多时间做没必要的工作.有时候只需要扫描表中关心的一部分数据,因此建表时引入了partition概念. 2.分区表指的是在创建表 ...

  5. testlink关联redmine设置

    Testlink关联Redmine 公司用testlink对测试用例进行维护,redmine关系项目及bug,所以为了方便期间,将Testlink关联Redmine,方便测试用例执行后,在redmin ...

  6. jade属性怎么写

    关于元素和标签,可能傻傻分不清楚,什么是元素,什么是标签,举个例子 比如div是一个块状元素,那么尖括号包起来的是标签,他用来标记这个元素,尖括号里面是元素名,元素是由开始和结束标签组成,用来包含内容 ...

  7. HTTP/TCP/IP UDP Socket等区别联系

    1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别”的网络之上. ...

  8. 利用Linux自带的logrotate管理日志

    日常运维中,经常要对各类日志进行管理,清理,监控,尤其是因为应用bug,在1小时内就能写几十个G日志,导致磁盘爆满,系统挂掉. nohup.out,access.log,catalina.out 本文 ...

  9. JVM 平台上的 Scheme 语言实现 JSchemeMin

    JSchemeMin 是一个JVM平台上的Scheme语言实现. 作为R7RS的实现,JSchemeMin支持Scheme的所有标准特性,包括头等公民地位的过程.尾递归优化.继续.用户定义记录.库(包 ...

  10. jquery模仿淘宝星星打分

    今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...