vue2-sgg

尚品汇项目

技术

• vue + webpack + vuex + vue-router + axios + less
• 封装通用组件
• 登陆注册
• token
• 路由守卫
• 购物车
• 支付
• 项目性能优化

目录

• public文件夹：一般放置一些静态资源(图片)。webpack进行打包时 会原封不动打包到dist文件夹中

• assets文件夹：一般放置多个组件共用的静态资源 在打包时 会当做一个模块打包到js文件里面

• components：放置非路由组件(全局组件)

• App.vue：唯一的根组件

• main.js：程序入口文件，也是整个程序当中最先执行的文件

• babel.config.js：配置文件(babel相关)

• package.json：记录项目的依赖及命令

• package-lock.json：缓存

项目其他配置

• 运行后自动打开 加上--open

• eslint校验功能关闭：根目录下创建vue.config.js

  module.exports = {
    // 关闭eslint
    lintOnSave: false
  }
  

• 配置别名

  resolve: {
    // 别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  }
  

项目路由分析

路由组件：Home、Search、Login

非路由组件(共用)：Header、Footer

路由组件的搭建

1. $route：一般获取路由信息(路径、query、params)
2. $router：一般进行编程式导航进行路由跳转(push/replace)

路由的跳转

1. 声明式导航：router-link
2. 编程式导航：push/replace

Footer组件显示与隐藏

1. 在Home、Search显示Footer组件
2. 在登陆、注册时候隐藏Footer组件

方法一：可以根据$route获取路由信息进行组件控制与隐藏

<!-- 方法一 -->
<!-- 在home search中显示 -->
<Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>

方法二：根据路由元信息进行判断

<!-- 方法二 -->
<Footer v-show="$route.meta.show"></Footer>

// router.js
{ path: '', component: '', meta: { show: true } }

路由传参

写法

• params：属于路径中的一部分。配置路由时需要占位
• query：不属于路径中的一部分，类似于ajax中的queryString /home?k=v&kv=, 不需要占位

方法一：字符串形式

goSearch() {
    this.$router.push(`/...`)
}

方法二：对象形式

this.$router.push({ name: "search", params: { keyword: this.keyword}})

TypeNav三级联动全局组件

首页静态组件拆分

axios二次封装

跨域处理

配置

 //代理跨域
 devServer: {
      proxy: {
           '/api': {
                target: 'http://39.98.123.211',
           },
      },
 },

nprogress进度条的使用

拦截器中使用

vuex