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 = falsenew 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

需要的功能：

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

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 = event