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