html页面引入vue组件
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组件的更多相关文章
- 不再手写import - VSCode自动引入Vue组件和Js模块
:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...
- iview table icon dorpdown html页面级别vue组件 #vuez#
iview table icon dorpdown html页面级别vue组件 <!DOCTYPE html> <html> <head> <meta cha ...
- 想在已创建的Vue工程里引入vux组件
<1>. 在项目里安装vux npm install vux --save <2>. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误) npm ...
- require.js 加载 vue组件 r.js 合并压缩
https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...
- vue 组件间传值方式
/* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2.在子组件里 ...
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...
- vue单页面引入CDN链接
不想在index.html文件中全局引入CDN资源,那么如何在Vue单文件组件中引入?下面来瞅瞅~ 虚拟DOM创建 Vue 通过创建一个虚拟 DOM 来追踪自己要改变的真实 DOM 什么是虚拟DOM? ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
随机推荐
- C#汉字转换成全拼的拼音
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 简单记录一次注入到shell
0x00 前言 帮朋友之前拿的一个站,有点久了没有完整截图,简单记录一下. 0x01 基础信息 操作系统:win 集成环境:phpstudy 端口开放:82,3306,3389 有phpmyadmin ...
- 巧用XML格式数据传入存储过程转成表数据格式
1.首先将后台数据转成对应的XML数据格式 /// <summary> /// 集合转XML数据格式 /// </summary> /// <param name=&qu ...
- 前端框架开始学习Vue(一)
MVVM开发思想图(图片可能会被缩小,请右键另存查看,图片来源于网络) 定义基本Vue代码结构 1 v-text,v-cloak,v-html命令 默认 v-text没有闪烁问题,但是会覆盖元 ...
- Android笔记（四） Activity之间的数据传递
我们之前使用Intent进行Activity之间的跳转,其实Intent还可以在启动活动的时候传递数据. Intent提供了一系列的putExtra方法以便我们把想要传递的数据暂存在Intent中,待 ...
- OF框架使用指导系列索引
一.项目搭建指导 [OF框架]搭建标准工作环境 [OF框架]使用OF框架创建应用项目 [OF框架]在Visual Studio中启用Docker支持,编译生成,并在容器运行项目 [OF框架]在Visu ...
- Codeforces #367 (Div. 2) D. Vasiliy's Multiset （trie 树）
http://codeforces.com/group/1EzrFFyOc0/contest/706/problem/D 题目:就是有3种操作 + x向集合里添加 x - x 删除x元素,(保证存在 ...
- java基础（4）---引用数据类型（数组、字符串、集合）
一.数组 格式: int[] nums; 1. 数据类型[] 数组名称; 2. 数据类型 数组名称[]; (不太推荐) 动态初始化: new int[4] 数据类型[] 数组名称 = new 数据类 ...
- Linux网络编程综合运用之MiniFtp实现(四)
从今天开始,正式进入MiniFtp的代码编写阶段了,好兴奋,接下来很长一段时间会将整个实现过程从无到有一点点实现出来,达到综合应用的效果,话不多说正入正题: 这节主要是将基础代码框架搭建好,基于上节介 ...
- js基础知识1
本博客转自某不知名程序员 1. JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:操作网页 ...