尚品汇创建

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

Vue开发重要的的就是组件化、模块化，提高组件的复用性。
开发一个前端模块可以概括为以下几个步骤：
（1）写静态页面、拆分为静态组件；
（2）创建此组件路由
（3）创建所需ajax请求（API）；
（3）vuex（actions、mutations、state三连操作）；
（4）组件获取仓库数据，动态展示
Vuex三连过程
通过组件内向Vuex派发dispatch，store中的actions收到任务并向服务器发送请求得到数据，通过mutations中的commit将从服务器中得到的数据给state，组件只需从state中获取数据响应到页面上。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建Vue项目

1.全局安装@vue/cli：npm install -g @vue/cli（安装一次就可以）
2.创建文件夹并运行cmd
3.输入指令vue create 项目名称

Vue2项目选择第二个

4.创建成功

5.项目目录

public文件夹：静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。

pubilc/index.html是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html。

src文件夹（程序员代码文件夹）

assets： 经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
components： 非路由组件（全局组件），其他路由组件放在views或者pages文件夹中
App.vue： 唯一的跟组件
main.js： 程序入口文件，最先执行的文件
babel.config.js: 配置文件（babel相关）
package.json: 看到项目描述、项目依赖、项目运行指令
package-lock.json: 缓存性文件（各种包的来源）

二、项目配置

2.1 关闭eslint校验工具（不关闭会有各种规范，不按照规范就会报错）
根目录下创建vue.config.js,进行配置

三、配置API

/*
对axios进行二次包装

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

// 配置不显示右上角的旋转进度条, 只显示水平进度条
NProgress.configure({ showSpinner: false })

const service = axios.create({
baseURL: “/api”, // 基础路径
timeout: 15000 // 连接请求超时时间
})

service.interceptors.request.use((config) => {
// 显示请求中的水平进度条
NProgress.start()

// 必须返回配置对象
return config
})

service.interceptors.response.use((response) => {
// 隐藏进度条
NProgress.done()
// 返回响应体数据
return response.data
}, (error) => {
// 隐藏进度条
NProgress.done()

// 统一处理一下错误
alert( 请求出错: ${error.message||'未知错误'})

// 后面可以选择不处理或处理
return Promise.reject(error)
})

export default service

四、节流与防抖

1.节流是规定了一个时间，只有点击间隔超过这个时间才执行函数，没有超过则不执行，达到节流效果。类似角色技能的cd，只有等cd好了才可以再次使用技能。

用时间戳实现如下：

运用lodash插件，npm i lodash -> import throttle from ‘lodash/throttle’
示例：
原来: a(){}
lodash: a: throttle(fuction(){} , 时间)

2.防抖是在频繁多次触发事件中，规定一个时间间隔，如果在这个时间间隔内又触发了事件，则重新刷新时间间隔，直到在整个时间间隔内没有再触发事件，则执行函数。类似于王者的多段技能，只要再一定时间内再次点这个技能，该技能就不会进入cd，如果一定时间内没有点该技能则进入cd。

用定时器实现如下：

运用lodash插件，npm i lodash -> import throttle from ‘lodash/debounce’
示例：
原来: a(){}
lodash: a: debounce(fuction(){} , 时间)

总结