shop-client 电商项目详解

安装与基本配置

npm install -g @vue/cli        安装脚手架
vue -V      查看是否安装脚手架
vue create shop-client         创建名为 shop-client 的项目
cd shop-client       进入到 shop-client 文件夹下
npm run serve      本地运行

npm i -g serve      安装静态资源服务
npm run build       打包项目
serve dist  -p 5000     在端口5000上运行打包后的项目（打包后的项目必须用静态资源服务运行）

Eslint配置

1、package.json : 全局规则配置文件

 "eslintConfig": {
   ... ...
    "rules": {
		'no-new': 'off'
	}
  },

2、vue.config.js:

module.exports = {
  lintOnSave : 'warning',    // 只输出提示信息，项目正常运行
 // lintOnSave : false,    //关闭 Eslint 检查
}

让vscode提示@开头的模块路径引入

jsconfig.json:

{
   
  "compilerOptions": {
   
    "baseUrl": "./",
    "paths": {
   
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

关于配置文件：

package.json 是npm的配置文件
vue.config.js 是webpack的配置文件
jsconfig.json 是让编辑器识别的配置文件

引入公共样式

公共样式文件放在项目目录下的public / css /reset.css
public 文件夹与 src 文件夹同级
在 index.html 文件中引入 reset.css ，引入文件的路径要写 / 不能写 . /：
<link type="text/css" rel="styleSheet" href="/css/reset.css" />

引入less预编译器

npm i -D less less-loader

引入vue-router、vuex

npm install -S vue-router

1、router/index.js：
路由器对象模块

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入路由文件
import routes from './router'

//声明使用vue插件
Vue.use(VueRouter)

//向外暴露一个路由器插件
const router = new VueRouter({
   
  mode : 'history',
  //配置应用中的所有路由
  routes
})

export default router

2、router/router.js：

import Home from '@/pages/Home'

export default [
  {
   
    path:'/',
    component : Home
  },
  {
   
    path:'/home',
    component : Home
  },
]

3、router/main.js：

import Vue from 'vue'
import App from './App.vue'
//引入路由器
import router from './router'

Vue.config.productionTip = false

new Vue({
   
  render: h => h(App),
  //配置路由器
  router
}).$mount('#app')

Header组件

面试问题: 如何指定params参数可传可不传?
path: ‘/search/:keyword?’
面试问题: 指定params参数时可不可以用path和params配置的组合?
不可以用path和params配置的组合
只能用name和params配置的组件
面试问题: 如果指定name与params配置, 但params中数据是一个"", 地址栏路径有问题
如果有参数数据, 指定params
如果没有参数数据, 不指定params
面试问题: 路由组件能不能传递props数据?
可以: 可以将query或且params参数映射/转换成props传递给路由组件对象
实现: props: (route) => ({
keyword1: route.params.keyword,
keyword2: route.query.keyword
})

Footer组件

如何控制footer/header组件在部分路由组件上不显示?
利用路由的meta配置:

  meta: {
      isHideFooter: true, // 标识footer是否隐藏
    }

< Footer v-if="!$route.meta.isHideFooter"/>

Home组件

将多个组件共用的组件，设置为全局组件

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入这个全局组件
import TypeNav from '@/components/TypeNav'

Vue.config.productionTip = false
//注册为全局组件
Vue.component('TypeNav',TypeNav)

new Vue({
   
  render: h => h(App),
  router
}).$mount('#app')

API 接口相关

对axios请求二次封装

npm install -S axios nprogress

需要的功能：

1. 配置通用的基础路径和超时
2. 显示请求进度条
3. 成功返回的数据不再是response, 而直接是响应体数据response.data
4. 统一处理请求错误, 具体请求也可以选择处理或不处理

api/ajax.js:

import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

//创建一个新的axios的实例
const ajax = axios.create({
   
  baseURL : '/api',
  timeout : 20000
})

//不显示右上角的旋转进度条
NProgress.configure({
    showSpinner: false });

//添加请求拦截器
ajax.interceptors.request.use((config) => {
   
  //显示进度条
  NProgress.start();

  return config
})

//添加响应拦截器
ajax.interceptors.request.use(
  response => {
   
    //关闭进度条
    NProgress.done();
    
    return response.data
  },
  error => {
   
    //关闭进度条
    NProgress.done();

    alert('请求出错：' + error.message || '位置错误')

    // return new Promise(() => {})  //中断Promise链，具体请求不处理

    return Promise.reject(error)   // 返回失败的Promise，具体请求可以处理
  },
)

export default ajax

封装接口请求函数

api/index.js:

import ajax from './ajax.js'

//首页三级分类
export default reqBaseCategoryList = () => ajax('/product/getBaseCategoryList')

配置代理服务器

vue.config.js:

module.exports = {
   
  lintOnSave : 'warning',
  devServer: {
   
    proxy: {
   
      '/api': {
   
        target: 'http://182.92.128.115/',
        changeOrigin: true
      }
    }
  }
}

vuex

npm install -S vuex

store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
   
  modules
})

store/modules/index.js:

import home from './home'

export default {
   
  home
}

store/modules/home.js:

const state = {
   }
const mutations = {
   }
const actions = {
   }
const getters = {
   }
export default {
   
  state,
  getters,
  mutations,
  actions
}

main.js:

import store from './store'

new Vue({
   
  store, // 注册vuex的store对象  ==> 所有组件对象都有一个$store属性
})

TypeNav 组件

功能：
1、组件与vuex交互
2、控制2/3级分类列表的显示与隐藏
3、点击分类项用router-link跳转到搜索，并携带query参数
4、对高频触发的事件进行函数节流处理
npm i --save lodash

import _ from 'lodash'  引入全部的lodash

使用时 _.throttle()
5、对lodash库实现按需引入, 减小打包文件

import throttle from 'lodash / throttle'  只引入throttle 函数

<input type="text" placeholder="口罩限时1元秒" v-model="keywordPrefix" @input="throttleInput"/>
--------------------------------------------------------------------
    //变更input发送请求
    async onTimeKeyWords(event){
   

      this.keywordPrefix