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">
    
    <script src="https://unpkg.com/vue/dist/vue.js">script>
    
    <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组件)