#前端开发避坑技巧001# 【一】（git 项目指令、vue工程化目录、v-for、v-if、 图片位置问题、取余数、多行/单行文本隐藏）

#前端开发避坑技巧001 （每篇8个）

前端开发过程中一些容易遇到的小问题以及解决技巧

git 项目指令、vue工程化目录、v-for、v-if、
图片位置问题、取余数、多行/单行文本隐藏

（1）从github下载项目并运行
从git下载代码到本机时，需要执行npm install
下载完项目后，切换到项目的根目录下，使用npm install命令安装依赖包
相关的依赖包下载完毕后，使用npm run dev命令运行项目

（2）webStorm 如何引入插件指令
以引入"element"为例
在webStorm里，找到下图，然后“ctrl c” ，再输入Y,即可
然后再输入新的指令
然后根据插件的安装指示，在指定位置输入代码即可

（3）完整的vue工程化目录

示例如下：




（4）v-for
在实际开发中，如果我们想要做一个导航栏，
或者一些相同的版块的时候，例如以下版块


我们不需要在html里面，把ul 里面的li全部写出来，
只需要通过在ul里面写一个li，
然后在li里面进行循环其他，
然后在js部分，写上data要循环的内容即可，
这样就可以达到简化代码，提高效率，
也可以方便后期我们进行导航栏内容的修改

以下是一个示例：

html版块内容：

<template>
     <div class="header-box">
       <div class="header-flex">
         <span>· 华南师范大学经济与管理学院党委</span>
         <span>中山大学计算机学院党委</span>
         <span>中山大学马克思主义学院党委 ·</span>
       </div>
       <div class="header-nav">
         <div class="logo">
           <img src="/static/image/logo.png" alt="">
         </div>
         <div class="nav">
           <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
             <el-menu-item :index="index" v-for= "(item,index) in list" >
               <router-link :to="item.url">{{ item.title }}</router-link>
             </el-menu-item>
           </el-menu>
           <div class="loginbar">
             <span>|</span>
             <img src="" alt="">
             <span>张佳佳</span>
             <i></i>
           </div>
         </div>
       </div>
     </div>
</template>

js版块的内容：

<script>
export default {
  name: 'header-box',
  data () {
    return {
      list: [
          { url:'/',title:'首页'},
          { url:'/history',title:'22学习'},
          { url:'/join',title:'433学习'},
          { url:'/meetings',title:'一课'},
          { url:'/organization',title:'我的'},
          { url:'/more',title:'更多'}
        ],
        activeIndex: 0
      }
   }
 }
</script>

css版块内容：

.header-nav .el-menu-demo {
  display: inline-block;
  vertical-align: middle;
  height: 24px;
  font-size: 16px;
  font-family: SourceHanSansSC-Regular, SourceHanSansSC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}

（5）v-if
v-if 的意思就是

• 作用：根据表达式的真假，切换元素的显示状态
• 本质是通过操纵dom元素来切换显示状态
• 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
• 频繁的切换使用v-show,反之使用v-if,前者的切换消耗小

（6）图片位置问题

- 如何让图片居左？

先子绝父相
父：position: relative;
子：position: absolute;
然后在子元素处，

top: 50%;
margin-top: -15px;（-子元素高度的一半,记得是负值）
left: 0;

直接上代码
HTML

<div class="grid-content bg-purple">
     <img src="/static/image/join1.png" alt="">
     <p>· 分子</p>
</div>

css

.grid-content {
    position: relative;
    width: 416px;
    height: 187px;
    border-radius: 4px;
    min-height: 36px;

}
.grid-content p {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 0;
    width: 168px;
    height: 30px;
    font-size: 20px;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: bold;
    color: #DA1A14;
    line-height: 30px;
}

- 如何让图片垂直居中？

先子绝父相
然后

   top: 50%;
   margin-top: -xxpx;（-子元素高度的一半,记得是负值）
   left: 50%;
   margin-left:-xxpx;（-子元素宽度的一半,记得是负值）

如何让图片垂直居右，也可以同理可得

（7）取余数
如果我们想按照单双数来显示版块里面的一些功能，
就可以在循环以后，
再用v-if以及取余的方法来判断当下的数据进行呈现

直接上代码

当i除于2，没有余数时，就用第一个ul里面的li
当i除于2，有余数时，就用第二个ul里面的li

HTML

 <div class="article">
            <ul class="ul-box ul-box-line">
                <li v-for="(item,i) in newsList" v-if="i%2 === 0">
                    <div class="left">{{ item.title }}</div>
                    <div class="right">{{ item.date }}</div>
                </li>
            </ul>
            <ul class="ul-box">
                <li v-for="(item,i) in newsList"  v-if="i%2 === 1">
                    <div class="left">{{ item.title }}</div>
                    <div class="right">{{ item.date }}</div>
                </li>
            </ul>
       </div>

css

<script>
import ArticleTitle from "./ArticleTitle";
export default {
  name: "articles",
    components: {ArticleTitle},
    data () {
      return {
          newsList : [
              {title:'·点赞!日报', date:'2021-11-20'},
              {title:'·点赞!日报', date:'2021-11-20'},
              {title:'·点赞!日报', date:'2021-11-20'},
              {title:'·点赞!日报', date:'2021-11-20'},
              {title:'·点赞!日报', date:'2021-11-20'},
              {title:'·点赞!日报', date:'2021-11-20'},
              {title:'·点赞!日报', date:'2021-11-20'},
              {title:'·点赞!日报', date:'2021-11-20'},
              {title:'·点赞!日报', date:'2021-11-20'},
              {title:'·点赞!日报', date:'2021-11-20'},
          ]

（7）gitee里面的一个主要的点：git pull

解释：
git在上传文件时，需要做多一步，就是git pull，
先将远程仓库里，可能有更新的文件，
先下载到本机电脑(因为会存在一种情况，别人也同时在修改你的代码，如果没有pull一下的话，那就有可能会覆盖掉代码，那如果你有pull一下的话，那如果有相同的文件时，会提示冲突，然后再看看要不要保存)

所以正确的顺序应该是

第一种情况：
1.本机文件搞定，想上传到远程仓库里
（1）.git commit -a -m message加一些备注的信息，方便进行查阅项目进度
这个是先将文件存放在本机一个.git文件夹的index文件里，算是与远程仓库的联系
（2）.git pull 将远程仓库里有更新的文件先下载到本机里
（3）.git push将本机文件，上传并合并到远程仓库里

2.在公司电脑先打开前一天的代码
直接git pull即可更新全部代码

（8）文本隐藏

多行文本隐藏
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素
（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，
需要组合上面两个属性，表示显示的行数。

单行文本隐藏
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space: nowrap; // 单行