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的文件夹来存放相应的子组件