项目基础架构搭建

项目基础架构搭建

一.文件夹和文件

1. 插入静态资源文件夹：resource文件夹（后台接口等）
2. public文件夹：存放大图片和mock数据
3. src----assets文件夹：存放小图片，如icon图片，css图片等
4. App.vue为根组件，不动，放一个

   <router-view></router-view>

   ，嵌套其他组件
5. src----api文件夹----index.js 承载整个项目api请求，把地址统一管理
6. src----util文件夹----index.js 公共机制（金额格式化，文字转换）
7. src----storage文件夹----index.js 数据存储的工具箱
8. src----store文件夹----存储关于vuex的相关配置
9. src----router.js 承载路由

二.组件相关

1. components文件夹：NavHeader.vue /NavFooter.vue 每个组件要有一个name属性

export default {
name:'nav-header'/name:'nav-footer'
}

1. page文件夹：
   ①》home.vue 承载共用组件

<template>
<div>
<nav-header></nav-header>//对应NavHeader.vue
<router-view></router-view>
<nav-footer></nav-footer>//对应NavFooter.vue
</div>
</template>

其他部分如产品栈开发，只需嵌套在

<router-view></router-view>

②》index.vue 首页组件

不需要

<nav-header></nav-header>

③》product.vue 产品栈组件

④》detail.vue 产品详情组件

第一个结构： home 主页面，index，product，detail三个页面嵌套在home里面的router-view

-----------------------------------------------------------------------------------------------------

第二个结构： 有关订单页面的组件 都放在pages文件夹中

①》order.vue 订单主结构，当作子路由（访问…/order）

②》orderList.vue 订单页面

③》orderConfirm.vue 订单确认

④》cart.vue 购物车

⑤》orderPay.vue 订单支付

⑥》aliPay.vue 中转页面（当前支付页面----支付宝页面）

---------------------------------------------------------------------------------------------------

第三个结构

pages文件夹: login.vue 登陆页面，独立开发