Vue2新蜂商城后台问题解决1.0

目录

创建脚手架时关闭eslint语法检测

解决Vue项目关于‘TypeScript intellisense is disabled on template. To enable, configure `"jsx": ’错误

安装完vue-router报一堆错误

Vue 引入路径正确的，但一直报错： Already included file name ‘××ב differs from file name ‘××ב only in casing.

get请求后端接口

路由的重定向

后端给我返回的格式如下，我要根据他提供的数据，将其转变为文字：

块级元素居中

TypeError: Cannot read properties of undefined (reading ‘post‘) 无法读取未定义的属性（读取“post”）

Error in v-on handler (Promise/async): “TypeError: Cannot read property ‘status‘ of 问题详解

可视化库EChart的引入

导航标签页的实现

获取当前路由的meta属性

更换页码和每页条数

---

创建脚手架时关闭eslint语法检测

在vue.config.js配置文件中添加配置lintOnSave:false

解决Vue项目关于‘TypeScript intellisense is disabled on template. To enable, configure `"jsx": ’错误

• 找到根目录下jsconfig.json文件。
• 添加上 "jsx":"preserve"

安装完vue-router报一堆错误

根据错误提示，在命令行中加入–legacy-peer-deps，由于vue与vue-router版本兼容的问题，需要在安装语句后加入需要下载vue-router版本，不然会下载最新的vue-router版本。

npm install --legacy-peer-deps vue-router@4.0.13

显示：在APP组件中

Vue 引入路径正确的，但一直报错： Already included file name ‘××ב differs from file name ‘××ב only in casing.

解决方法：去掉.vue后缀

get请求后端接口

  const {data} = await axios.get("http://join.marchsoft.cn/api/adminUser/adminLogin", {
        params: {
          info: this.loginNumber,
          password: this.password
        }
      })
    }

是否请求到：判断message与statue的值是不是分别为 SUCCESS 和 0

跳转路由时$router无需注册 跳转：

this.$router.push({
          //目的路由组件
          path:'/home'
        })

替换：

this.$router.replace({
           //目的路由组件
          path:'/home'
        })

路由的重定向

var router = new VueRouter({
  routes:[
    // {path:'/', redirect:'跳转到的路由地址'}
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home}
  ]
})

后端给我返回的格式如下，我要根据他提供的数据，将其转变为文字：

我们可以在需要处理行里，加入:formatter方法，具体代码如下：

<el-table-column prop="protocolType" label="协议类型" :formatter="formatProtocolType" > </el-table-column>

//table 表格

<el-table>
    <el-table-column prop="type" label="案件类型" :formatter="sfktFormate"></el-table-column>
</el-table>

添加formatter属性对应的sfktFormate是一个方法

//table表格格式化
    sfktFormate(row,index){
      if (row.type == 1) {
        return "男";
      } else if(row.type == 0){
        return "女";
      }
    }

块级元素居中

.lcontainer{
    text-align: center;
    width: 100%;
}
.juzhong {
    width: 60%;
}

TypeError: Cannot read properties of undefined (reading ‘post‘) 无法读取未定义的属性（读取“post”）

在main.js中：全局axios改为：

import axios from 'axios'

Vue.prototype.$axios = axios
复制代码

Error in v-on handler (Promise/async): “TypeError: Cannot read property ‘status‘ of 问题详解

解决方法: 导出的方法为按需导出 但是在另外组件中导入该方法时没有进行按需导入 只需要在组建中对该方法添加{ }进行按需导

可视化库EChart的引入

1、使用npm安装Echarts：

npm install echarts --save

2、全局引入Echarts：

//main.js 不推荐
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

个人不推荐在main.js全局引入的发方式，根据项目使用Echarts的程度可以选择按需引入：

3、按需引入Echarts：

let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); //所需图表

 引入示例：

 mounted() {
    this.init();
  },
  methods: {
    init() {
      //2.初始化
      this.chart = echarts.init(this.$refs.chart);

      let option = {
        title: {
          text: '系统折线图'
        },
        tooltip: {
         ...
        },
        legend: {
          ...
        },
        toolbox: {
         ...
        },
        grid: {
         ...
        },
        xAxis: [
         ...
        ],
        yAxis: [
         ...
        ],
        series: [
         ...
          }
        ]
      };
      this.chart.setOption(option);
    }
  },

导航标签页的实现

 实现功能：点击左侧栏，路由跳转至对应页面并且出现对应的标签栏

运用组件：element-ui

实现：

（1）引入样式，明白其中的参数意义

<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"
                        @tab-click="matching">
    <el-tab-pane :key="item.name" v-for="(item) in editableTabs" :label="item.title"
         :name="item.name">
    </el-tab-pane>
</el-tabs>

data() {
        return {
            editableTabsValue: '1',
            editableTabs: [
                {
                    title: '系统设置',
                    name: '1',
                    headName: '系统设置'
                }
            ],
            item: {},
        }
    },

（2）在路由中给路由加上属性，运用meta属性，再运用全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用。实现页面跳转时标签页页展示出来。

 {
        path: 'dashboard',
        component: Dashboard,
        meta: { name: "dashboard", num: '2', headName: "大盘数据" }
      },

当前组件中：

mounted() {
        this.$router.beforeEach((to, from, next) => {
            // console.log(to.meta.name);
            console.log(to);
            //点击之后自动在带有标签页属性的数组添加当前被点击的标签页对象
            this.editableTabs.push({
                title: to.meta.name,
                name: to.meta.num,
                headName: to.meta.headName
                // path:to.$route.path
            })
            next()
        })
    },

获取当前路由的meta属性

$route.meta.headName 

更换页码和每页条数

  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[10, 15, 20]" :page-size="10" layout="sizes, prev, pager, next" :total="120">
</el-pagination>

handleSizeChange(val) {
    console.log(`每页 ${val} 条`)
    this.pageSize = val;
    this.getData()
},
handleCurrentChange(val) {
    // 当前页码数
     console.log(val);
    this.currentPage = val;

    // 请求数据
    this.getData()
},