公共组件及脚手架webpack模板

一、公共组件的创建和使用

　　前面已经学习vue组件时，了解了公共组件，但在脚手架项目中只使用过局部组件。这里是讲解全局组件如何在脚手架项目中去使用。

1、创建全局组件

　　在src/components/Common/目录下创建Header.vue组件。

<template>
    <div class="header">
        我是头部
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{

            };
        },
    };
</script>

<style scoped>

</style>

2、引入和注册全局组件

　　main.js是整个项目的入口启动文件。随后引入和注册全局组件。

// main.js是整个项目的入口启动文件
// 导入npm下载的模块
import Vue from 'vue'

// 导入自己编写的模块
// 不同在于如果是npm下载的from直接写名称，自己编写的模块 from后接路径
import App from './App.vue'

// 1.引入全局的组件
import Header from './components/Common/Header.vue'
// 2.注册全局组件
Vue.component(Header.name, Header);


new Vue({
  el: '#app',
  // DOM直接渲染
  // appendChild()
  render: h => h(App)
})

3、在入口组件中使用全局组件

<template>
    <!-- 组件的页面结构 -->
    <div id="app">
        <Header/>
        <h3>{{msg}}</h3>
        <div v-html="title"></div>
        <ul>
            <!-- key绑定key的时候，如果数据中有id就绑定id，没有id绑定index -->
            <li v-for="(item, index) in datas" :key="index">{{item}}</li>
        </ul>
        <!-- 引入首页, -->
        <Home :text="text" @add="addHandler"/>
    </div>
</template>

4、页面显示

　　

二、vue-cli的webpack模板项目