httpVueLoader
.vue文件 分为三个部分
其中。template 相当于Html
其他两个地方没有变化
style 后面可以加一个
scoped
属性 来防止不同的vue文件的样式混淆的问题 下面我们表演如何用webstrom 来运行一个简单的hello.vue文件
<template>
<div class="hello">
Hello {{who}}
</div>
</template>
<script>
module.exports={
data: function () {
return {
who: 'world'
}
}
}
</script>
<style scoped>
.hello {
padding: .5em;
font-size: 2em;
background-color: #fcf;
}
</style>
vue是无法直接运行的 但是可以使用一个小插件来运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue File</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<style>
#app{
margin: 1em;
font-size: 1.5em;
}
</style>
</head>
<body>
<div id="my-app">
<my-component></my-component>
</div>
<script>
new Vue({
el:"#my-app",
components:{
'my-component':httpVueLoader('hello.vue')
}
})
</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「安果移不动」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mp624183768/article/details/88387044
httpVueLoader的更多相关文章
- Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- Vue常用开源项目汇总
前言:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
- vue各种插件汇总
https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...
- VUE插件大总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- Vue相关开源项目库汇总
https://github.com/opendigg/awesome-github-vue http://www.opendigg.com/tags/front-vue README.md 内容 U ...
- vue插件大全汇总
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
- 【转载】 github vue 高星项目
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- VUE插件总结
亲们支持我的新博客哦==>地址(以后更新会尽量在新博客更新,欢迎大家访问加入我的后宫w) ) UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和W ...
随机推荐
- 走好数据中台最后一公里，为什么说数据服务API是数据中台的标配？
一.课程介绍 数据服务API作为数据统一服务平台建设的最上层,能够将数据仓库数据以服务化.接口化的方式提供给数据使用方,屏蔽底层数据存储.计算的诸多细节,简化和加强数据的使用. 随着企业"互 ...
- Altair官方文档——HyperMesh模型管理
1.4 模型管理 在HyperMesh中创建一个有效的求解输入文件时,模型管理功能是非常必要的.本节将介绍基本的模型管理方法,如单元和载荷归类.集合组装.重命名.删除.排序以及重新编号等. 本节将学习 ...
- 一文读懂Cookie、Session和Token：原理、区别与应用场景
咱上网冲浪的时候,天天和各种网站.APP打交道.但HTTP协议有个"毛病"--它记性不好,每次请求都像第一次见面,根本不记得之前和你聊过啥.为了解决这个问题,程序员们整出了Cook ...
- 用 AI 制作超长视频，保姆级教程！
大家好,我是程序员鱼皮.之前分享了 如何利用 AI 生成 ASMR 视频 和 动物奥运会视频,给大家推荐了 Google Flow 这个 AI 视频创作工具. Google Flow 可以直接使用最新 ...
- c#基础（视频）
可空类型 类型后面+?就可以声明可空类型了,可空类型和普通的类型是两种类型,赋值时需要进行类型转换 例如 double? num=null: 面向对象 三大特征 封装 打包,便于管理 继承 拿来主义, ...
- 学习spring cloud记录6-初识nacos
前言 nacos已经成为了springcloud官方的插件,相对于Eureka功能更加丰富,但是Eureka并没有停止维护,Eureka2.x的并没有使用,spring还是用的1.x的版本. 安装na ...
- vite使用短链接
增加改配置项 vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' impor ...
- 【6】ST表学习笔记
前言 学习ST表,主要是倍增思想,可以理解为倍增优化后的DP.写在这里,一方面方便自己以后复习,另一方面给其他人参考. UPD on 2023/3/21 :修改了格式,使格式与其他的学习笔记统一. 倍 ...
- 自用的springboot后端增删改查模板
Springboot后端简易方式快速搭建 前言 快速学了下.和传统的springboot项目相比,没有用service和serviceImpl.比较不合规,但够简单.可以用于快速开发. 前后端分离.前 ...
- mysql 笛卡尔积
简介 新生成的表的行数 第一个表的行数 * 第二个表的行数 参考链接 mysql 必知必会