macmall项目开发

1. 划分目录结构

assets 资源 （img、css）
components 公共组件
	common 拿到其他项目也能用的
    content 只和当前项目相关的公共组件
views 大视图（首页，分类，购物车等大的页面）
router 路由
store 状态管理
network 网络相关
common 公共的js文件（const.js抽取公共常量；utils.js公共方法；mixin.js混路）

2. 引入css文件
   css初始化：引入normalize.css和base.css（normalize在base中引入了，所以base需要在App.vue中的style中引入@import "assets/css/base.css";）
   高度：顶部navbar高度44px/底部tabbar高度49px
   css定义变量：

:root{ --large-size:50px;}   //定义
.title{ font-size:var(--large-size) }   //使用

3. 配置
   ①配置文件路径别名：根目录下创建vue.config.js，@表示src，使用时如果是html中的路径，则需要在别名前面加符号～，例如：src="~assets/img/tabbar/home.svg"。导入组件方法：import TabBar from "components/common/tabbar/TabBar";。
   ②editorconfig.js（代码统一风格）

/*** vue.config.js ***/
//vue-cli 2.0 实现步骤
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
      }
    }
  }
}

//vue-cli 3.0 实现步骤 需要重启IDE
const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  lintOnSave: true,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets',resolve('./src/assets'))
      .set('common',resolve('./src/common'))
      .set('components',resolve('./src/components'))
      .set('network',resolve('./src/network'))
      .set('views',resolve('./src/views'))
  }
};

4. 项目模块划分
   ①把封装好的tabbar组件和图片复制进来，把views文件夹里四个页面的组件复制进来（有些地方需要修改下路径）
   ②使用MainTabBar.vue组件
   在App.vue中的script中引入组件和注册import MainTabBar from "./components/content/mainTabbar/MainTabBar";，在模板中使用组件<main-tab-bar/>
   ③路由映射关系
   安装路由npm install vue-router --save，在router文件夹中创建index.js（引入Vue和VueRouter，安装插件、创建路由对象配置对应的映射关系、导出router，对views里的四个页面文件进行懒加载，再去main.js中挂载router注册），在模板中使用组件<router-view/>

5. 封装顶部navbar组件

6. network请求数据