Vue后台管理系统笔记-01

npm（Node Package Manager）和 yarn 是两个常用的包管理工具，用于在 Node.js 项目中安装、管理和更新依赖项。它们有以下几个区别：
性能和速度：在包的安装和下载方面，yarn 通常比 npm 更快速。yarn 使用了并行下载和缓存等优化策略，可以提供更快的安装速度。
缓存机制：yarn 具有更强大的缓存机制，能够更好地利用缓存，减少重复下载。这对于团队协作和构建机器上的重复构建是有益的，可以节省时间和带宽。
安全性：yarn 在包的下载和安装过程中更加注重安全性。它通过使用 yarn.lock 文件来锁定依赖项的版本，确保在不同环境下使用的是相同的依赖版本，从而减少由于依赖项版本不一致导致的问题。
用户界面：yarn 提供了更友好和直观的命令行界面，显示更详细的信息，如安装进度、依赖关系树等。相比之下，npm 的命令行界面较为简洁。
生态系统：npm 是 Node.js 生态系统的默认包管理工具，拥有庞大的包库和活跃的社区支持。大多数开源项目和文档都以 npm 为主要的依赖管理工具。虽然 yarn 的用户数量在不断增加，但 npm 仍然是广泛使用的。
尽管存在这些区别，npm 和 yarn 的基本功能和使用方法是相似的。你可以根据个人偏好、项目需求和团队约定来选择使用 npm 还是 yarn。无论选择哪个工具，都应该确保在项目中一致使用，以避免依赖版本不一致和构建问题。

ElementUI
ElementUI是一个基于Vue.js的桌面端组件库，它提供了一套丰富的UI组件，可以快速构建用户界面。ElementUI的设计风格简洁大方，同时也非常符合现代化的UI设计趋势。
ElementUI提供了诸如按钮、表单、弹窗、菜单、导航栏、表格等常见的UI组件，这些组件可以直接在项目中使用，也可以根据需要进行定制化。ElementUI还提供了丰富的功能组件，例如图片上传、富文本编辑器、日期选择器等，可以方便地满足各种业务需求。
ElementUI的组件具有良好的可重用性和可扩展性，可以根据自己的需求进行定制化开发。另外，ElementUI还提供了丰富的主题样式，可以轻松地切换不同的主题风格。
总之，ElementUI是一个功能丰富、易于使用和定制的桌面端组件库，可以帮助开发者快速构建美观、高效的用户界面。

Vue Router
Vue Router是Vue.js官方提供的路由管理器，用于在Vue应用中实现路由功能。它通过监听URL的变化来匹配对应的组件，并将组件渲染到指定的路由出口。Vue Router具有以下特点：

1. 嵌套路由：Vue Router支持嵌套路由，可以通过配置路由的子路由来实现组件的嵌套和嵌套路由的匹配。
2. 路由参数：可以通过配置路由参数来动态传递数据，并在组件内使用。
3. 路由导航：可以通过Vue Router提供的导航守卫功能来进行路由的拦截和控制，实现权限验证、登录验证等功能。
4. 路由传参：可以通过编程式导航来实现路由的传参，可以在组件内获取到上一个路由传递的参数。
5. 命名路由和命名视图：可以给路由和路由出口命名，方便进行路由的跳转和组件的渲染。
6. 路由懒加载：可以通过配置动态import来实现路由的懒加载，提升应用的性能。
   总的来说，Vue Router提供了简洁、灵活的API，能够帮助我们快速构建单页应用的路由功能。它与Vue.js非常配合，能够方便地实现页面组件之间的切换和导航。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); //全局注入


import { Row, Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Row); //按需注入
Vue.use(Button)

Vuex是一个用于Vue.js应用程序的状态管理模式。它允许我们在应用程序中集中管理和共享状态，并且可以在不同组件之间进行通信和更新状态。Vuex解决了在大型应用程序中状态分散和管理困难的问题。
Vuex的核心概念包括：
State（状态）：用于存储应用程序的所有状态（数据）。
Getters（获取器）：用于从状态中获取数据的计算属性。
Mutations（突变）：用于修改状态的方法，可以理解为是对状态的同步修改。
Actions（行动）：类似于突变，但是可以进行异步操作，可以用来处理业务逻辑。
Modules（模块）：用于将状态、突变、行动进行模块化，使得状态管理更具可维护性和可扩展性。
使用Vuex可以使得组件之间共享相同的状态变得简单和可预测，而不需要通过props和事件进行繁琐的传递和监听。它使我们能够在应用程序中集中处理状态的变化，并提供了一种可追踪和调试的方式来查看状态的变化历史。
总结来说，Vuex提供了一种更优雅和高效的方式来管理Vue.js应用程序的状态，使得应用程序更加可维护、可扩展和可测试。

import Vue from 'vue'
import Vuex from 'vuex'
import tab from '/tab'
Vue.use(Vuex)
//创建vuex的实例
export default new Vuex.Store({
    modules: {
        tab
    }
})

Ajax是一种用于创建交互式Web应用程序的技术。它是一种在不刷新整个页面的情况下，通过异步方式向服务器发送请求并接收响应的技术。
Ajax全称为"Asynchronous JavaScript and XML"（异步JavaScript和XML），但实际上，现代的Ajax技术已经不再局限于使用XML格式。它可以与服务器进行数据交换，不需要重新加载整个网页，并且可以在后台处理数据。
使用Ajax，可以通过JavaScript在后台与服务器进行通信，并根据服务器的响应更新网页的一部分。这意味着网站可以更快地响应用户的操作，并且可以提供更流畅的用户体验。
Ajax的主要特点包括：

1. 异步性：Ajax请求是在后台进行的，可以在等待服务器响应的同时继续进行其他操作。
2. 实时性：Ajax可以实时更新网页内容，而无需重新加载整个页面。
3. 无需刷新：Ajax可以部分更新网页的内容，而不需要重新加载整个页面。
4. 互动性：Ajax可以响应用户的操作，并根据用户的输入实时更新网页。
5. 跨浏览器兼容性：Ajax技术可以在各种不同的浏览器上运行。
   Ajax在构建现代Web应用程序中扮演着重要的角色，它被广泛应用于网页表单验证、数据加载、动态内容更新等方面。

Axios是一个基于Promise的HTTP客户端，用于发送异步HTTP请求。它可以在浏览器和Node.js中使用，并且可以处理GET、POST、PUT、DELETE等多种HTTP请求。Axios的特点包括以下几个方面：

1. 支持Promise：Axios基于Promise实现，可以使用async/await简化异步操作的处理，使得代码更加清晰和易于维护。
2. 跨平台：Axios可以同时在浏览器和Node.js中使用，可以方便地进行前后端开发。
3. 可拦截请求和响应：Axios提供了拦截器，可以在请求和响应过程中对数据进行拦截和处理，例如在请求中添加token，或者在响应中进行状态码的判断和处理。
4. 提供了强大的验证和错误处理机制：Axios支持自定义验证和错误处理函数，可以在请求和响应过程中对数据进行校验和处理。
5. 支持取消请求：Axios提供了取消请求的功能，可以在发送请求后取消未完成的请求，避免浪费资源。
   总的来说，Axios是一个功能强大、易于使用的HTTP客户端库，可以简化HTTP请求的发送和处理过程，并且具有跨平台的优势。

import axios from 'axios'
const http = axios.create({
        baseURL: '/api',
        timeout: 10000, //超时时间

    })
    // Add a request interceptor
http.interceptors.request.use(function(config) {
    // Do something before request is sent
    return config;
}, function(error) {
    // Do something with request error
    return Promise.reject(error);
});

// Add a response interceptor
http.interceptors.response.use(function(response) {
    // Do something with response data
    return response;
}, function(error) {
    // Do something with response error
    return Promise.reject(error);
});


export default http

Mock.js 是一个用于生成随机数据的 JavaScript 库。它可以在前端开发过程中，模拟后端接口的数据返回。Mock.js 可以帮助开发人员在开发过程中快速搭建前端页面，并且不依赖后端接口的数据。
使用 Mock.js，可以快速生成各种类型的随机数据，包括数字、字符串、布尔值、对象、数组等。Mock.js 还提供了一些常用的辅助函数，用于生成更具体的数据，如生成姓名、邮箱、手机号码等。
Mock.js 的使用非常简单，只需要在前端代码中引入 Mock.js，并使用其提供的 API 来定义数据模板，然后调用相应的接口即可。Mock.js 可以拦截 AJAX 请求，根据定义的数据模板返回相应的随机数据。
Mock.js 还提供了一些高级功能，如设置响应延迟、生成随机图片、生成随机日期等。这些功能可以帮助开发人员更好地模拟真实的数据返回，提高开发效率。
总结来说，Mock.js 是一个非常实用的前端开发工具，可以帮助开发人员快速生成随机数据，模拟后端接口的返回，提高开发效率。