vue使用http-vue-loader 来运行.vue格式的文件-白红宇的个人博客

发布日期：2021-05-07 19:17:32 浏览次数：23 分类：原创文章

本文共 1172 字，大约阅读时间需要 3 分钟。

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

上一篇：cmd /c和cmd /k和cmd &&

下一篇：Vue component通过slot来传递数据

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章