Travel项目小记（一）

1  在组件单文件里的style里面引入外部的css文件，@import  '路径' , 路径中如果要写@（@代表src目录）则需要在前面加一个 ~ 号

2 改路径的别名，在bulid文件夹里面的webpack.base.conf.js找到resolve 修改

3 在远程上建立新的分支index-swiper, 然后在本地上 git pull 会把新的分支拉到本地，然后 git checkout 'index-swiper' 切换到本地新的分支,在本地完成了index-swiper的编写，①git add .  ②git commit -m 'change'  ③git push 提交到线上的index-swiper分支上，然后在本地转到master主分支，把主分支和线上的index-swiper分支合并 git merge origin/index-swiper，然后git push到线上的主分支,所以master主分支有了最新的代码，而index-swiper分支只会更新到轮播功能完成的代码

4 喜欢4格缩进，eslint,vue默认2格缩进,修改eslint :  在.eslintrc.js中rules添加 "indent": ["error", 4],    修改vue: 在.editorconfig中indent_size = 4

5 文字太多改成点点点   overflow hidden      white-space nowrap     text-overflow ellipsis

6 在vue项目中，只有static中的文件可以被外部访问到,可以在.gitignore中配置使其不会上传到git本地和远程仓库里面

7 路径重写，在config里面的index.js找到proxyTable进行配置

8 父元素width写百分之一百，height为0，padding-bottom为50%，子元素写宽为25%，padding-bottom为25%，那么子元素占到父元素的八分之一（自适应的），然后给子元素里面图片的包裹层（icon-img）设为绝对定位,而图片让其高为100%，可以做到图片大小的自适应

.wrapper
    width 100%
    height: 0;
    overflow hidden
    padding-bottom 50%
    .icon
        position relative
        float left
        padding-bottom 25%
        width 25%
        hieght 0
        overflow hidden
        .icon-img
            position absolute
            left 0
            top 0
            right 0
            bottom 0.64rem
            padding .1rem
            box-sizing border-box
            .icon-img-content
                height 100%
                display block
                margin 0 auto

8 iconfont 的使用，在iconfont的官网创建项目，并找好图标后，下载，并吧字体文件（后缀带eot,svg,ttf,woff）复制到vuex项目的assets中,在main.js中引入

9 在使用swiper组件，需要改其中的css样式时，因为有scoped（只作用于本组件，不作用于swiper组件），所以写css样式时，需要这么写（用到 >>> 符号）

.wrapper>>> .swiper-container