初始化项目结构 & 完成主页基本布局配置

初始化项目结构 & 完成主页基本布局配置

初始化项目结构

创建项目，自定义命名

vue init mpvue/mpvue-quickstart myshop-79

创建远程仓库

在码云中创建（github）

公司中一般使用 gitlab(公司自己搭建的git服务器)

公司的git账号是自己分配zhangsan@abc.cn

需要在本地生成公钥和私钥，需要把自己的【公钥】提供给git的负责人

在git终端中执行 ssh-keygen 一直回车，生成公钥和私钥

将公钥提供给git负责人

// 公钥和私钥的位置 C:\Users\自己的用户名\.ssh

git clone 仓库地址

基于git进行项目管理

git init

git add -A

git status 查看文件变化

git commit -m ‘初始化版本’

git remote add origin 远程仓库地址

git remote -v 查看远程仓库别名

git push -u origin master

主页功能

配置项目底部的菜单

配置app.json文件中tabBar属性

list "text": "首页", "pagePath": "pages/home/main", "iconPath": "static/icon/1-1.png", "selectedIconPath": "static/icon/1-2.png"

配置app.json文件的pages属性

"pages": [ "pages/home/main", "pages/cate/main", "pages/card/main", "pages/my/main" ]

创建菜单对应的页面

index.vue <template> <div> 分类 </div> </template> <script> export default { data () { return {} } } </script> main.js import Vue from 'vue' import App from './index' const app = new Vue(App) app.$mount()

准备：在src同层级的static文件夹下的images文件中放入需要的导航菜单图标文件

第一步：在src下的app.json导航栏文件配置

{ "pages": [ "pages/home/main", "pages/cate/main", "pages/cart/main", "pages/my/main" ], "window": { "backgroundTextStyle": "light", //导航栏背景颜色 "navigationBarBackgroundColor": "#EB4450", //导航栏标题 "navigationBarTitleText": "优购", //title文字颜色 "navigationBarTextStyle": "white" }, "tabBar": { "color": "#999", "backgroundColor": "#fafafa", "selectedColor": "#333", "borderStyle": "white", "list": [{ "text": "首页", "pagePath": "pages/home/main", "iconPath": "static/images/1-1.png", "selectedIconPath": "static/images/1-2.png" }, { "text": "分类", "pagePath": "pages/cate/main", "iconPath": "static/images/2-1.png", "selectedIconPath": "static/images/2-2.png" }, { "text": "购物车", "pagePath": "pages/cart/main", "iconPath": "static/images/3-1.png", "selectedIconPath": "static/images/3-2.png" }, { "text": "我的", "pagePath": "pages/my/main", "iconPath": "static/images/4-1.png", "selectedIconPath": "static/images/4-2.png" }] } }

第二步：在pages下面新建导航栏菜单页面结构

第三步：每个菜单文件夹下，新建页面文件index.vue和入口文件main.js

index.vue文件模板

main.js文件模板

第四步：新建文件后，npm run dev 进行重新启动项目，最终普通编译下，呈现的菜单布局效果

第五步：可以进行代码提交，完成主页基本布局配置