主页

开始之前

1. 创建一个.gitignore 文件（项目忽略文件），这个文件中所写的都是不上传到源代码仓库中去的目录和文件

.idea，.vscode，这是idea和vs中相关软件配置文件

node_modules
.idea
.vscode
.git

2. 开源协议，将一个LICENSE文件放入到根目录中去

• mit开源协议
• 开源协议的详细介绍

3. git仓库管理工具，这个工具可以将项目上传到码云或者github中去

• 首先安装git
• 在输入命令时项目根目录会出现一个隐藏文件夹.git

git init

• 查看没有上传，或者修改过的文件

git status

• 上传文件

git add .

• 提交，初始化项目

git commit –m “init my project”

• 如果没有绑定邮箱,会弹出提示，绑定相应的邮箱
  git config --global user.email "你的邮箱"
  git config --global user.name "你的名字"
• 关联ssh，使用git可以生成ssh，然后在github中关联ssh创建仓库，即可将项目上传到自己的github中
• 将代码提交到github中

---

项目首页模块

头部和底部导航栏

1. 在App.vue中，使用mint-ui和mui中的已有的样式和组件创建一个简易的头部和导航栏
   ·```
   
   
   
   
   

   123

    

        
            
            首页
        
        
            9
            消息
        
        
            
            通讯录
        
        
            
            设置
        
    
     

2. main中先引入包,创建vue实例，然后导入组件

import Vue from 'vue'

import {Header} from 'mint-ui'
Vue.component(Header.name,Header)
//按需导入mint-ui中的组件


import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'//引入扩展图标样式

//导入mui样式


import app from './App.vue'
//导入App组件


var vm=new Vue({
    el:'#app',

    data:{

    },
    render:c=>c(app)

})

3. 此时这个头部会覆盖下面的内容，因此可以设置一个编剧

4. 为了使底部导航栏更加契合，改变导航栏相应的文字，图标的类
5. 在制作购物车图标时需要引入扩展图标样式，复制扩展字体库ttf文件才能正常显示图标
6. 为导航栏添加点击每个图标的路由，使点击不同的图标都能跳转不同的页面，导入路由

import VueRouter from 'vue-router'//导入路由的包
Vue.use(VueRouter)//安装路由

7. 导入路由模块，并且把路由对象挂载到VM实例中去

import router from './router'//导入路由模块

8. 把导航栏的所有a标签链接修改为router-link标签，把href属性改变为to属性以便调用不同组件

 
                
                首页
            
            
                
                会员
            
            
                
                0
                购物车
            
            
                
                搜索
            

9. 设置点击路由产生的类，以便可以添加点击效果和高亮

var router=new VueRouter({
    routes:[
        {}
    ],
    linkActiveClass:'mui-active'
})

---