标签：Vue cli Footer Header vue 组件 Sidebar name
组件化开发
一个.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>
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>
####测试结果
####打包部署出现空白，错误为路径问题时
由于是基于 Webpack，可以在根目录创建 vue.config.js，设公共路径
module.exports= {
publicPath:'./'
}
```标签：Vue,cli,Footer,Header,vue,组件,Sidebar,name 来源： https://www.cnblogs.com/keacua/p/15304845.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。