[vue]webpack中使用组件

https://blog.csdn.net/ywl570717586/article/details/79984909

vue.js中全局组件

全局组件的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
</head>
<body>
<div id="app">
    <app01></app01>
</div>

<template id="app01">
    <div>
        <p>app01</p>
    </div>
</template>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let app01 = {
        name: 'app01',
        template: "#app01",
    };
    Vue.component(
        'app01', app01
    );
    let vm = new Vue({
        el: "#app",
    })
</script>
</body>
</html>

全局组件一旦定义,想在哪里使用就在哪里使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
</head>
<body>
<div id="app">
    <app02></app02>
</div>

<template id="app01">
    <div>
        <p>app01</p>
    </div>
</template>

<template id="app02">
    <div>
        <p>app02</p>
        <app01></app01>
    </div>
</template>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let app01 = {
        name: 'app01',
        template: "#app01",
    };
    Vue.component(
        'app01', app01
    );

    let app02 = {
        name: 'app02',
        template: "#app02",
    };

    let vm = new Vue({
        el: "#app",
        components:{app02}
    })
</script>
</body>
</html>

webpack: 自定义全局组件并使用

1.定义
2.Vue.use(login); //相对单文件, 多了这步
3.Vue.component('login', login);
4.其他vue使用.

<template>
    <div>login</div>
</template>

<script>
    export default {
        name: "login"
    }
</script>

<style scoped>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'

import login from './components/login.vue'

Vue.use(login);
Vue.component('login', login);  //这两条两者一个就ok了.
new Vue({
    el: '#app',
    render: c => c(App)
});

https://mint-ui.github.io/docs/#/zh-cn2/quickstart

App.vue

<template>
    <div>
        <p>app</p>
        <login></login>
    </div>
</template>

<script>
    export default {
        name: "app"
    }
</script>

webpack: 导入组件,局部使用

<template>
    <div>
        <p>app</p>
        <login></login>
    </div>
</template>

<script>
    import login from './components/login.vue'

    export default {
        name: "app",
        components: {
            login
        }
    }
</script>