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. JavaScript 入门与进阶

    JavaScript 介绍 javascript 是运行在浏览器端的脚本语言,javascript 主要解决的是前端与用户交互的问题,包括使用交互 和 数据交互,javascript 是浏览器解释执行 ...

  2. 使用swap扩展内存

    当系统在内存不够用的时,新建一个swap文件,这个文件可以把内存中暂时不用的传输到对应的swap文件上,相当于扩展了内存的大小,具体使用方法如下: swap文件可以自己选择放在哪里,自己新建一个对应的 ...

  3. 最新版Navicate破解激活

    2019年5月5日激活成功 版本12.1.18 Navicat12.1下载地址 http://www.navicat.com.cn/download/navicat-premium有32位和64位,大 ...

  4. 五、DML操作汇总

    前言: DML(Data Manipulation Language)数据操作语言,以INSERT.UPDATE.DELETE三种指令为核心,分别代表插入.更新与删除,是必须要掌握的指令,DML和SQ ...

  5. git 把其他分支上的文件拿来覆盖本地

    1:git checkout oldversion -- 文件地址 2: 一个分支从某个角度讲也像是一次commmit,也是有向无环图的一个点

  6. 这个在Github有52100颗星星的项目，怎么还有人不知道鸭！

    Ta是近两年Docker最为火热的开源项目之一.Docker 开启了容器时代,而Ta则革新了我们对于云计算,软件开发流程,业务平台等等方面的认知. Ta就是Kubernetes,/k(j)uːbəˈn ...

  7. 解析CentOS 7中系统文件与目录管理

    Linux目录结构 Linux目录结构是树形的目录结构 根目录 所有分区.目录.文件等的位置起点 整个树形目录结构中,使用独立的一个"/"表示 常见的子目录 目录 目录名称 目录 ...

  8. [networking][sdn] BGP/EGP/IGP是什么

    引子 这是一个惊悚的故事,胆小的人不要点开.整个故事,是从这张图开始的. 整个图,分左中右三块.左边是tom和他所在的网络.右边是jerry和他所在的网络.这两个网络可以在世界上的任何一个角落.彼此有 ...

  9. OF框架使用指导系列索引

    一.项目搭建指导 [OF框架]搭建标准工作环境 [OF框架]使用OF框架创建应用项目 [OF框架]在Visual Studio中启用Docker支持,编译生成,并在容器运行项目 [OF框架]在Visu ...

  10. github看项目-浏览器插件

    浏览器插件,使用浏览器看github项目 原文:浏览 GitHub 太卡了?教你两招!