mall开发第一天

1.文件结构的划分：

common：存放的是与一些共用的js

components/common:放的是公共的组件，也就是不仅这个项目能用到，别的项目也可以用的组件
components/contend:放的是仅有这个项目能用到的组件

network：封装axios的网络请求操作

store：存放vuex相关的操作

view：里面是各种比较大的视图

2.使用Github来托管代码：

1）github下载：
参考： git下载
2）此时在vscode中使用git的命令可能会出现错误

fatal: unable to access 'https://github.com........./': OpenSSL SS

解决：添加环境变量：编译用户变量Path

之后新建属性：把下载好的git对应文件的路径添加进去

之后就可以在vscode中使用git命令，

3）之后首先在github中创建自己的仓库

在终端中输入：

git clone "你的仓库地址" #在远程的仓库复制一个到本地中

之后手动的把要复制进去的文件复制进克隆的本地仓库中

比如我这里的mall文件夹
之后运行命令：

 git status #查看文件的状态
 git add .  
 git config --global user.email "you@example.com"  #登录账号信息
 git config --global user.name "Your Name"
 git commit -m '初始化项目'
 git push

之后远程的仓库就有了复制进去的代码。

git remote add origin https://github.com/GDforever/test.git
git push -u origin main

3.css文件的引入

1.nomalize.css :做初始化
2.创建一个base.css，做基础的样式

在base.css中通过@import来导入 normalize.css

之后在App.vue中来导入base.css

4.vue.config.js和editorconfig

因为vuecli3隐藏了配置，所以对相关配置的修改，我们需要创建一个vue.config.js，之后系统会把这里面的配置和公共的配置合并

/* eslint-disable quote-props */
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'network': '@/network',
        'views': '@/views',
        'components': '@/components'
      }
    }
  }
}

这里是给需要经常用到的文件夹起别名，

editorconfig文件：是在开发项目的时候统一的规定代码缩进等问题的，所以在项目引导开发的时候一定要加上。

5.导入之前开发的底部边栏框

6.小图标的修改以及路径问题

是在index.html中的favicon.ico

7.实现的小细节：

1）命名的问题
对于包名：一般是小驼峰命名法
组件命名：用的是大驼峰命名法
对于class的类名：小写并且是用 - 分割

2）对于组件的抽取：

比如这里，一个包里有两个组件需要一起被引用，此时可以创建一个index.js，里面对两个组件一起引用，并且导出

import TabBar from './TabBar.vue'
import TabBarItem from './TabBarItem.vue'

export {
  TabBar,
  TabBarItem
}

import { TabBar, TabBarItem } from 'components/common/tabbar'

3）这里封装了一个轮播图的组件（后面的项目也可以用）

4）

<template>
  <div class="tab-control">
    <div v-for="(item, index) in titles" :key="item" class="tab-control-item"
    :class="{isActive: index === currentIndex}" @click="divClick(index)">
      <span>{{item}}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TabControl',
  props: {
    titles: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      currentIndex: 0
    }
  },
  methods: {
    divClick (index) {
      this.currentIndex = index
    }

  }
}
</script>
<style scoped>
.tab-control {
  display: flex;
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  background-color: white;
}
.tab-control-item {
  flex: 1;
}
.tab-control-item span{
  padding: 5px;
}

.isActive {
  color: var(--color-high-text);
}
.isActive span {
  border-bottom: 2px solid var(--color-tint);
}

</style>

这里是使用v-for来遍历得到很多的div，此时需要实现的功能是确定点击的是哪一个div，方式就是data里面拿到一个currentIndex，其次在遍历的时候是（item， index），之后就是操作index和currentIndex

5）其次这里封装了request.js,但是针对每一个view组件，都维持一个单独的js，比如home.vue面对home.js来请求后端的数据

6）

对于一个view组件，有很多的子组件来完成，此时是创建一个childcomps的文件夹来存放相应的子组件