Vue-cli学习-组件化开发

组件化开发

一个.vue 文件就是一个组件，里面基本包含：html、js 和 css 三个部分；
这种方式，分离了每个组件的关联，提高了内聚，所以叫：组件化开发；
开发完毕后，再进行打包编译成常规模式即可运行；
默认创建的项目，src 包含两个文件：App.vue 和 main.js；
上节课了解过 App.vue 是根组件，而 main.js 是入口文件，注释如下；

Vue-cli学习-组件化开发_组件化

测试

app.vue
<template>
  <div id="app">
    <Header title="SBSBSBSBSB"></Header>
    <Sidebar></Sidebar>
    <Footer></Footer>

  </div>
</template>

<script>
import Footer from "@/components/Footer";
import Sidebar from "@/components/Sidebar";
import Header from "@/components/Header";

export default {
  name: 'App',
  components: {
      Footer,
      Sidebar,
      Header
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Footer,Sidebar,Header
<template>
  <h4 class="footer">版权所有，翻版必究</h4>
</template>

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

<style scoped>
    .footer{
        color: red;
    }
</style>
#####################
<template>
    <h2 class="title">{{title}}</h2>
</template>

<script>
export default {
  name: "Header",
  props:{
    title:String,
  }
}
</script>

<style scoped>
    .title{
      color: black;
    }
</style>
######################
<template>
      <ul class="link">
        <li v-for="item in link"><a href="#">{{item}}</a></li>
      </ul>
</template>

<script>
export default {
  name: "Sidebar",
  data(){
    return {
      link:['首页','咨询','图文','关于']
    }
  }
}
</script>

<style scoped>
    .link a{
      color: blue;
    }
</style>


####测试结果
![](https://img2020.cnblogs.com/blog/2205131/202109/2205131-20210917152309198-1423209977.png)
####打包部署出现空白，错误为路径问题时
    由于是基于 Webpack，可以在根目录创建 vue.config.js，设公共路径

module.exports= {
    publicPath:'./'
}
```