技术架构： vue2 + webpack + vuex + vuerouter + axios + less

功能模块：

  • 封装通用组件
  • 登录注册
  • token
  • 守卫
  • 购物车
  • 支付
  • 项目性能优化…

项目初始化及相关配置

项目创建

如果有成熟的项目，可以配一套自己的脚手架配置

前置条件：node环境

安装vue-cli

1
2
npm i vue-cli -D
npx vue create 项目名

选择vue2

备注：下载慢可以配置淘宝镜像，但2022年了，基本不慢

项目目录

项目目录及文件介绍：

  • node_modules

    • 项目依赖文件夹

  • public

    • 一般放置一些静态资源（图片）

    • webpack进行打包时，会原封不动的打包到dist目录

    • 该目录中新建axios.config.js，该文件中导出ip和port，这样无论是开发还是生产，更改环境就很方便，否则生产环境下，服务器信息就被写死在代码里了（低版本的vue-cli是static文件夹）

      public/axios.config.js

      1
      2
      3
      4
      const Config= {
        ip: '1.13.**.**',
        port: '80',
      }

      axios中使用，src/utils.request.js

      1
      2
      3
      4
      5
      6
      7
      8
      export function request(config) {
          const instance = axios.create({
              baseURL: `http://${Config.ip}:${Config.port}`,
              // timeout: `${Config.timeout}`
          })
          
          // ...
      }

  • src

    • 源代码文件夹
    • assets文件夹
      • 一般也是放置静态资源（多个组件共用的静态资源）
      • webpack进行打包时，会把assets静态资源当作一个个模块，打包到JS文件中
    • components文件夹
      • 放置非路由组件（全局组件）
    • App.vue
      • 唯一的根组件
    • man.js
      • 程序的入口文件

  • babel.config.js

    • babel相关的配置文件，可参阅babel官网

  • package.json

    • 项目的“身份证”，记录项目叫做什么，项目中有哪些依赖，项目怎么运行

  • package-lock.json

    • 缓存性文件

  • README.md

项目的其他配置

  • 配置src别名

    • jsconfig.json

      1
      2
      3
      4
      5
      6
      7
      8
      9
      {
          "compilerOptions": {
              "baseUrl": "./",
              "path": {
                  "@/": ["src/"]
              }
          },
          "exclude": ["node_modules", "dist"]
      }

    • 新版vue-cli已经默认支持别名了

  • 设置浏览器自动打开

    • package.json中的serve值，新增--open

      1
      2
      3
      "scripts": {
          "serve": ”vue-cli service serve --open“
      }

  • 关闭eslint

    • 新建vue.config.js，新增

      1
      2
      3
      4
      module.exports = {
          // 关闭eslint
          lintOnSave: false
      }

项目路由分析及编写

确定路由组件和非路由组件

  • 路由组件
    • Home首页路由组件
    • Search路由组件
    • Login登录路由组件
    • Register注册路由组件
  • 非路由组件
    • Header
      • 在首页、搜索页
    • Footer
      • 在首页、搜索页中有
      • 在注册、登录页中没有

非路由组件

根据静态资源，将静态资源拆分成一个个组件：资源来源：静态页面

目录结构：

  • components
    • Footer
      • index.vue
    • Header
      • index.vue

注意：这里为了便于掌控dom结构， 可以不直接复制，采用半复制的形式，也要具体看下怎么写的

新建components/Header/index.vue

  • 定义组件

    • 复制html结构到template中

    • 复制对弈的less样式到style中，配置lang=less，安装less和less-loader：npm i less less-loader

    • 将公共组件各自需要的图片资源，保存在各自的文件夹下的images文件夹下

  • public文件夹在在index.html中引入reset.css及相关的图标字体文件

  • 在App.vue中引入组件并使用

新建components/Footer/index.vue，同上操作

路由组件

Home、Search、Login、Register

目录结构

  • pages

    • Home
      • index.vue
    • Search
      • index.vue
    • Login
      • index.vue
    • Register
      • index.vue

  • 定义各个路由组件

  • 在router文件夹的index.js中，定义前端路由和路由组件的映射关系（使用懒加载的方式导入）

    • 重定向首页

  • 设置相应的路由跳转

    • 登录、注册和回到首页，使用声明式导航
    • 搜索，使用编程式导航
      • 指定搜索的回调函数goSearch

非路由组件的显示与隐藏

  • 使用路由元信息实现Footer路由的显示与隐藏
    • 登录、注册路由下，Footer组件是没有的
    • 首页、搜索路由下，Footer组件是显示的
  • 配置四个路由组件的路由元信息
  • 使用v-show配合$route.meta.show控制Footer组件的显示与隐藏

路由传参

  • 使用对象形式进行params和query方式传参
  • 配置params可以不传参数
  • 传递pramas参数时，取值可以用或表达式，使用undefined解决params值为空的情况
  • 重写push方法和replace方法

功能模块

首页模块

  • 根据静态页面，将三级联动功能、轮播图+快报、今日推荐、热卖排行、猜你喜欢、品牌模块封装成组件
  • Home目录下，新建三级联动组件TypeNav，并注册为全局组件
  • 新建ListContainer组件（轮播图）