vue使用http-vue-loader 来运行.vue格式的文件

最新推荐文章于 2024-06-10 14:13:49 发布
最新推荐文章于 2024-06-10 14:13:49 发布
阅读量2.1w 收藏 17
点赞数 5
分类专栏： # vue
独学而无友，则孤陋寡闻。q群582951247
本文链接：https://blog.csdn.net/mp624183768/article/details/88387044
版权

.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>

 

安果移不动
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
专栏目录
httpVueLoader使用示例（用于cdn引入vue2后在html文件中使用组件开发）
TwoBE9876的博客
05-04 1749
用于cdn引入vue2后在html文件中使用组件开发
http-vue-loader：从您的htmljs加载.vue文件
02-03
:warning: Vue3支持： : :warning: http-vue-loader 直接从html / js加载.vue文件。 没有node.js环境，没有构建步骤。 例子 my-component.vue < template> < div xss=removed>Hello {{who}}</ div> </ template> < script > module . exports = { data : function () { return { who : ' world ' } } } </ script > < style > .hello { background-color : #ffe ; } </ style > index.html <!doctype html > < html lang =" en " > < head > < script src =" https://unpkg.com/vue " > </ scri
HTML界面利用 http-vue-loader.js以组件方式引入vue文件
TwoBE9876的博客
05-04 961
http-vue-loader 这套工具可提供开发者直接在网页环境中载入 .Vue File，无需透过 nodeJS 环境编译，也不需要 Build 的步骤。在index的 mounted 中无法访问引入的组件 但是在 methods 通过事件可以操作 组件的数据。用法很简单，首先在网页上载入 Vue 与 http-vue-loader，如下。其他vue文件引入 第一个第一个组件 也可以生效。
vue-loader
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
06-10 1051
1.进入vue-loader的normal处理转换代码为。
单页面vue项目注册使用组件(使用httpVueloader)
shinjie1210的博客
12-15 2583
目录 安装并引入插件插件 准备组件 引用 其他注册方法 插件js文件 主要是最近写的项目涉及到,就顺便记录一下, 使用的概率不是很大啊毕竟现在大部分都是直接搭的项目组件正常方式使用组件即可 安装并引入插件插件 既然是单页面使用,最简单快捷的就是直接script引用了,这里我就直接把文件放出来自取好了,今天百度网盘有点卡分享不出来,文件又比较长,就放文章最末尾吧 <script src="./lib/httpVueLoader.js" type="text/javascript"
使用httpVueLoader动态加载组件注意事项
ggxin的博客
12-17 906
使用传统的html+js+vue编写前端页面时，经常也会使用到自定义组件，会使用到httpVueLoader这个插件，记录下使用过程中遇到的一些坑。2、给组件传参props，定义的变量只能识别小写字母。1、.vue文件格式。
spring boot的配置文件的加载顺序
CHEstudy的博客
12-12 203
Spring Boot中采用了大量的自动化配置，但是对开发者而言，在实际项目中不可避免会有一些需要自己手动配置，承载这些自定义配置的文件就是resources目录下的application.properties文件。 Spring Boot项目中的application.properties配置文件一共可以出现在如下4个位置： · 项目根目录下的config文件夹中。 项目根目录下。 classpath下的config文件夹中。 classpath下。 例如： ...
vue-module-loader:让你用微前端架构搭建Vue应用
08-04
vue-module-loader 是一个 Vue 插件，让你使用类似于的架构开发 Vue 应用。 Let you use the micro front-end architecture to build Vue applications 推荐使用vue-module-creator生成样板工程。 $ yarn global add...
vue-jsx-hot-loader-使用JSX渲染功能为Vue.js组件启用HMR。-Vue.js开发
05-27
vue-jsx-hot-loader适用于：使用Vue的JSX渲染功能时，此加载器将启用Webpack的热模块替换。 安装npm inst vue-jsx-hot-loader适用于：使用Vue的JSX渲染功能时，此加载器将启用Webpack的热模块替换。 安装npm install...
深入理解vue-loader如何使用
08-30
vue-loader只处理*.vue文件，需要在webpack的配置文件中配置babel-loader或者buble-loader来处理普通的js文件。vue-cli在项目中可以做这些事情。 局部css 当一个style标签带有scoped属性，它的css只应用于当前组件...
前端html利用http-vue-loader以组件方式引入vue文件
06-15
地址：https://github.com/FranckFreiburger/http-vue-loader，httpVueLoader是从github上下载上传的。 Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件： ...
httpVueLoader.js
12-26
可提供直接在网页环境中载入 .Vue 文件，无需通过 nodeJS 环境编译，也不需要 Build 的步骤。
文件 httpVueLoader.js
08-09
在html页面中直接加载vue文件
vue3 中的懒加载
加油小伙子
08-02 618
createApp(App).use(VueLazyLoad, { loading: '/imgs/loading-svg/loading-bars.svg' }).mount('#app') <img v-lazy="item.img" alt=""> npm ivue3-lazyload
html vue 动态加载组件
zk_1325572803的博客
08-13 609
html vue 动态加载组件 1、html: <components :is="Comtab" ref="Comtabref"> </components> 2、引入js <script type="text/javascript" src="../js/vue/http-vue-loader.js"></script> 3、vm Vue.use(httpVueLoader); // 加载表格组件 changeTabCom(item){
js：http-vue-loader从浏览器直接引入vue文件
彭世瑜的博客
09-17 2379
doc github: https://github.com/FranckFreiburger/http-vue-loader index.html <!doctype html> <html lang="en"> <head> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> <script src="https://
Vue（十九）VueRouter路由
Good Luck
05-20 244
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./static/js/vue.js"></script> <script src="./static/js/vue-router.js"></script> .
不使用webpack 不用编译 也能使用 vue组件，单文件vue: ，那就是使用 http-vue-loader
热门推荐
haoyafei_的博客
09-27 1万+
上週在 Vue 社群圈有個令人興奮的熱門新聞: CodePen 可以支援.vue檔案了！ Check it out - you can use `.vue` files in CodePen Projects easily:https://codepen.io/chriscoyier/project/editor/ZJYvvg/?preview_height=30&open_fil...
html页面引入vue组件之http-vue-loader.js
Hiroshi's
04-05 7029
首先这种方法不推荐，日常工作中也不会在html里面引入一个vue文件，只是为了有时候方便测试才会这么做 1.创建my-component.vue <template> <div class="hello">Hello {{who}}</div> </template> <script> module.exports = { data: function() { return { who.
vue2安装vue-style-loader!css-loader
04-27
你可以通过以下命令来安装 vue-style-loader 和 css-loader： ``` npm install vue-style-loader css-loader --save-dev ``` 或者 ``` yarn add vue-style-loader css-loader --dev ``` 安装完成后，在 webpack 配置文件中添加以下配置： ```js module.exports = { module: { rules: [ { test: /\.css$/, use: ['vue-style-loader', 'css-loader'], }, ], }, }; ``` 这样就可以在 Vue 组件中使用样式了。例如： ```vue <template> <div class="my-component"> <h1>Hello World!</h1> </div> </template> <style> .my-component { background-color: #f0f0f0; padding: 20px; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安果移不动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值