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://www.icode9.com/i/l/?n=20&i=blog/2205131/202109/2205131-20210917152309198-1423209977.png)
####打包部署出现空白,错误为路径问题时
    由于是基于 Webpack,可以在根目录创建 vue.config.js,设公共路径

module.exports= {
    publicPath:'./'
}
```
上一篇:jrxml模板制作及打印(一)


下一篇:vue的父传子 与子传父