项目基础架构搭建

项目基础架构搭建

一.文件夹和文件

  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>等,因为其也嵌套在home.vue里面了

③》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 登陆页面,独立开发

展开阅读全文
©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读