vue个人学习笔记——html单独引入.vue组件_html引用vue单文件组件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43565052/article/details/105382448

注：个人学习笔记仅记录个人学习

一共需要准备四个文件
1.vue.js，引入文件
2.http-vue-loader插件，html单独vue组件引入的必备插件
3.html文件
4.vue组件

文章目录

文件准备

一共需要准备四个文件
1.vue.js，引入文件
2.http-vue-loader插件，html单独vue组件引入的必备插件
3.html文件
4.vue组件

相关代码

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <prop></prop>		//调用prop组件
    </div>
    <script type="text/javascript">

        Vue.use(httpVueLoader);				//使用插件来运行vue组件
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'Hello World'
            },
            components: {
                'prop':'url:./prop.vue'		//注册prop组件并填写相对位置
            },
        })
    </script>
    <style >
    </style>
</body>
</html>

vue组件代码

<template>
    <div >{{msg}}</div>
</template>

<script>
    module.exports = {
        data: function() {
            return {
                msg: '组件引入成功'
            }
        }
    }

</script>

<style scoped>

</style>

跨域问题

运行的时候可能会遇到跨域问题，即下面截图的问题
在这里插入图片描述
这时候就需要自己在本地配置一个nginx来进行转发一下

因为我是一个小白，所以笔记写的基础、简单一些
需要在这里 http://nginx.org/en/download.html下载一个nginx，然后用cmd命令行进入到安装位置，输入start nginx和tasklist /fi "imagename eq nginx.exe"
在这里插入图片描述
这个时候nginx就配置好了，然后把上述所需文件放到nginx自带的html文件夹中，以localhost方式访问就可以了