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. 关于MQ的几件小事（三）如何保证消息不重复消费

    1.幂等性 幂等(idempotent.idempotence)是一个数学与计算机学概念,常见于抽象代数中. 在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同.幂等函数,或 ...

  2. ios获取数组中的最大值

    在编码过程中,我们通常碰到一组数据,需要自己简单的处理下,拿到数组中的总和,大小和平均值数据. 1.简单粗暴的方法,快速求和. NSArray * array = @[@"35", ...

  3. FreeRTOS 任务挂起和恢复

    在使用RTOS的时候一个实时应用可以作为一个独立的任务.每个任务都有自己的运行环境, 不依赖于系统中其他的任务或者RTOS调度器. 任何一个时间点只能有一个任务运行,具体运行哪个任务是由RTOS调度器 ...

  4. Python基础Day6

    一.代码块 一个模块(模块就是py文件),一个函数,一个类,一个文件都是一个代码块,一个整体是一个代码块. 交互模式的每一行都是一个代码块(交互模式:命令提示符),相当于每行都在不同的文件 二.id ...

  5. TLS1.3对CIP的影响（对密码套件的解释）

    1.术语定义的即使(算法)Definition of terms (optional) Cipher Suite  :通信数据保护规范,对TLS指定对端身份验证,关键技术机制,后续数据加密和数据验证机 ...

  6. Docker部署Kafka以及Spring Kafka操作

    从https://hub.docker.com/ 查找kafka 第三个活跃并stars数量多 进去看看使用 我们使用docker-compose来构建镜像 查看使用文档中的docker-compos ...

  7. C++——友元 friend

    人类社会的friend VS C++世界的friend 现实世界中,我们自己很多物品,朋友是可以使用的,但是陌生人就不行.那么money,朋友可以随便拿吗?这要是你和friend的关系深浅而定.人类社 ...

  8. 无线热点登陆认证原理探究---captive portal 什么是Captive Portal

    什么是Captive Portal 大家肯定都连过公共场所的wifi热点,比如麦当劳等地方的.他们的wifi往往一连上去就会弹出一个要求登录或者微信关注之类的页面,只有在这个页面完成操作了才能正常访问 ...

  9. node中的npm的使用

    1.node中npm的使用 nodejs软件 1.安装nodejs 自带了npm  npm install Bootstrap 好比python自带pip  pip3 install requests ...

  10. JDK源码那些事儿之ArrayBlockingQueue

    线程在JDK中是非常重要的一块内容,所有的应用服务都离不开线程的相关操作,对于大量线程的使用都是推荐使用线程池来进行操作和管理,JDK本身提供的线程池在服务中经常被使用到,以往经常使用Executor ...