# kk-management

**Repository Path**: overbug/kk-management

## Basic Information

- **Project Name**: kk-management
- **Description**: 前端技术栈1.vue-router 2.vuex 3.axios 4.element-ui 5.mock6.echarts
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-06
- **Last Updated**: 2024-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# my-app

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


##element-ui 安装
  1. npm i element-ui -S
  2. 在main.js里面引入import ElementUI from 'element-ui';
                      import 'element-ui/lib/theme-chalk/index.css';
  3. 再全局使用Vue.use(ElementUI)
  4. 把App.vue的样式以及没用的东西删掉
  以上是全局引入的方法
##element-ui 按需引入
 1. 借助babel-plugin-component，我们可以只引入需要的组件，以达到减少项目体积的目的。
 2. npm install babel-plugin-component -D
 3. 将文件babel.config.js数组的内容copy
    ["es2015", { "modules": false }]
    以及plugins属性
    "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
  4. 然后在main.js中引入import { Button, Select } from 'element-ui';
      Vue.component(Button.name, Button);
      Vue.component(Select.name, Select);
      /* 或写为
      * Vue.use(Button)
      * Vue.use(Select)
      */

  注： es2015可能没有这个依赖，会报错，将名字es2015改为@babel/preset-env

  按需引入：打包的时候，没用到的组件就没加载，用到的组件进行引入。
  全局引入：把所有组件加载的全部的加到项目里面，打包的时候。
  为了让用户更好的体验，用户请求资源的时候会发起http请求，
  项目越大，请求的时间就越长，影响用户的体验。
  也算是前端优化的一步

## vue-router的引入
  npm i vue-router@3.6.5
  1. src新建router文件夹创建index.js文件
  2. import Vue from 'vue'
      import VueRouter from 'vue-router'

      Vue.use(VueRouter)
  3. 在main.js中引入router
    import router from './router'
  4. 在当前实例上挂载

  5.关闭eslint代码规范
  在vue.config.js中
   lintOnSave: false //关闭eslint校验
   再重启项目

  6. 放到app.vue中 <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>


  ## 引入less选择器
  1.在npm官网上查找有没有对应的版本号
  2.npm i less@4.1.2 
  3.npm i less-loader@6.0.0
  4. 对默认的样式进行清除在App.vue
  <style lang="less" >
      html,body {
        margin: 0;
        padding: 0;
      }
    </style>
  5. scoped只对当前页面作用于当前页面


  ## vuex的引入
  1.npm i vuex@3.6.2 这是vue2的版本
  2.在src文件中创建store文件夹
  3.用vuex实现左侧折叠
     1、过程就是点击按钮触发store当中state的修改方法，然后在aside组件当中获取并且使用state的变化结果


## 9.9的bug
1.handlemenu的点击事件 在方法里面handleMenu单词不一致导致控制台报错为没有定义handlemenu的方法，把handleMenu改为handleMenu
2.重新敲代码时，同样出现报错，控制台显示state中没有定义define，因为在tab.js中的collapseMenu(state) 函数接收 state 对象作为参数，然后修改 state.isCollapse 的值。这种设计使得 collapseMenu 能够明确地知道它正在修改哪个状态属性，并且这个修改是同步发生的。如果你不使用 state 作为参数，那么你就无法访问到 Vuex store 的当前状态，从而无法进行任何状态更新。
  把collapseMenu()改为collapseMenu(state)

## 9.10 的bug
1.在Home.vue中的实现对表单的数组遍历中出现bug,无法响应到数据是因为把()写成了{}
 <el-table-column v-for="{val, key} in tableLabel" :prop="key" :label="val" :key="key"/>
2.把{val, key} 改为 (val, key)
 el-table-column v-for="(val, key) in tableLabel" :prop="key" :label="val" :key="key"/>
 3.以及:key="key"，是在用v-for的时候会警告⚠，但是不影响运行，所以如果看不习惯可以加上

 ## axios安装
 1. npm install axios
 2. 创建utils文件夹，里面创建request.js文件
 3. 
 二次封装axios
 // 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  4.创建api文件夹，创建index.js文件，导入import http from "@/utils/request";
    创建一个getData实例返回一个promise
  5. 然后再Home.vue中引入import { getData } from '../api'


  ## mock的安装
  用于前端模拟后端接口的一个库，可以通过拦截前端发起的请求，去自己定义一些返回的数据，这种情况下是我们不依赖后端的情况
  作用就是生成随机数据，拦截ajax请求
  1. npm i mockjs
  2. 在api文件夹中新建mock.js
  3. import mock from "mockjs";

// 定义mock请求拦截
mock.mock('/api/home/getData', function () {
  //拦截到请求后的处理逻辑
  console.log('拦截到了');
  
})
4. 在main.js中引入


## 引入echarts
1. npm i echarts@5.1.2
2. 在Home.vue中引入
import * as echarts from 'echarts'
3. 在文件中的 mounted下面
   // 基于准备好的dom，初始化echarts实例
     // var myChart = echarts.init(document.getElementById('main'));
     const echarts1 = echarts.init(this.$refs.echarts1)