Vue2.5学习笔记（五）如何进行组件化开发？

第1步：新建组件文件

HomeHeader.vue

<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont">&#xe624;</span>
        </div>
        <div class="header-input">
            <span class="iconfont">&#xe632;</span>
            输入城市/景点/游玩主题</div>
        <div class="header-right iconfont">
            <span class="iconfont">&#xe6aa;</span>
            城市</div>
    </div>
</template>
<script>
export default {
    name:'HomeHeader',
    data:function(){
        return{

        }
    }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/varibles.scss';
.header{
    display: flex;
    height: .86rem;
    background-color: $themeBgColor;
    color:#fff;
    line-height: .86rem;
}
.header-left{
    width:.64rem;
    float: left;
    margin-left: .2rem;
}
.header-input{
    flex:1;
    height: .64rem;
    margin-top:.12rem;
    margin-left: .2rem;
    background-color: #fff;
    border-radius: .1rem;
    color:#ccc;
    line-height: .64rem;
    padding-left: .1rem;
    font-size: .30rem;
}
.header-right{
    width:1.24rem;
    float:right;
    text-align: center;
}
</style>

第2步：在需要使用该组件的页面中导入并添加标签

<template>
    <div>
        <home-header></home-header>
    </div>
</template>
<script>
import HomeHeader from './components/Header'
export default {
    name:'Home',
    data:function(){
        return{

        }
    },
    components:{
        HomeHeader:HomeHeader
    }
}
</script>
<style lang="scss" scoped>
</style>

第3步：优化

使用CSS预处理时，将需要频繁用到的颜色、字体大小等熟悉抽离

src/assets/styles/varibles.scss

$themeBgColor:#00bcd4

导入组件的style标签中：

@import '~@/assets/styles/varibles.scss';

为常用目录起别名

@import '~@/assets/styles/varibles.scss';

像这样很长的一串路径，在代码里非常不美观，我们可以在build/webpack.base.conf.js中为频繁访问的目录取别名。类似于src目录的别名为@一样。
注意：修改webpack相关文件后需要重新启动项目。

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles':resolve('src/assets/styles'),
    }
  },

开发新功能时在新分支下开发

当我们开发一个新功能时，可以在git中新建一个分支，在该分支上进行该功能的开发，在开发完成后再合并到master主分支上。
（1）在码云或Github中新建一个分支
（2）本地终端运行git pull，就会把远程分支拉取到本地仓库中。

（3）运行git checkout 新分支名 ，即可切换到新分支，接下来进行的开发都是在该分支上进行的。