结束标签少了/

今天在运用vue的插槽方式的时候，一不小心写飘了，结果发现代码报错， 标签没有匹配到结束标签。

托管静态资源

js代码管理文件夹，js和文件夹要放在同一级目录，不能放在被管理的文件夹里面，入若放在里面，则回出现以下提示

正确目录则是

根目录
├── public
│   ├── css
│   │   └── index.css
│   ├── img
│   │   └── bg.jpeg
│   ├── js
│   │   └── axios.js
│   └── index.html
└── serve.js     # 服务器

Node在上一级文件出现的问题

一串代码如下

错误:ENOENT:没有这样的文件或目录，打开'./02.js'  

解决方式有两种
1、利用fs模块__dirname :获取当前被执行文件夹的绝对路径，然后再进行拼接 2、重启小黑窗，在代码文件夹上鼠标右键，集成中断打开

Npm导入包

这个错误在dayjs容易犯错，总会有些小伙伴喜欢在中间加个·，例如我，最后执行的错误

Promise发送请求

一般我们运用一个函数来进行封装

此时的代码是写好的一个简单的promise的代码，我们可以看到我将return注释掉了

服务器给我们报：没有then这个方法，所以手写的大佬们记得加return哦

webpack配置项

如图，每个配置项应该写入module.exports里面，总会有些小伙伴不走寻常路，喜欢将代码重新写入报错信息如下

错误会显示，未找到模块，无法运行

vue中的v-for的使用

基于当时for语句的使用还不清楚

这个地方明显的报错，对照了下官方文档发现自己代码没有问题，下面一起看看报错情况

大概的意思是语句不对两种解决方案 删除掉idx这个，或者使用idx

v-for中key的值是唯一的，如果不是唯一则报

原代码

解决方式，最好绑定元素的下标

修改后的代码

vue监听器

如图所示，定义了一个数据，渲染到页面，用户删除或者添加，将用户添加的数据保存到本地

<template>
  <div id="app">
    <div class="container">
      <!-- 顶部搜索框模块 -->
      <div class="form-group">
        <div class="input-group">
          <h4>品牌管理</h4>
        </div>
      </div>

      <!-- 数据表格 -->
      <table class="table table-bordered table-hover mt-2">
        <thead>
          <tr>
            <th>编号</th>
            <th>资产名称</th>
            <th>价格</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, idx) in list" :key="idx">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>

            <!-- 如果价格超过100，就有red这个类 -->
            <td :class="{ red: item.price > 100 }">{{ item.price }}</td>
            <td>{{ item.time | day() }}</td>
            <td><a href="#" @click="del(idx)">删除</a></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td v-if="list == 0" colspan="5" style="text-align: center">
              暂无数据
            </td>
            <td v-if="list != 0" colspan="5" style="text-align: center">
              共计：{{ sum }} 平均为:{{ ave }}
            </td>
          </tr>
        </tfoot>
      </table>

      <!-- 添加资产 -->
      <form class="form-inline">
        <div class="form-group">
          <div class="input-group">
            <input
              v-model="good.name"
              type="text"
              class="form-control"
              placeholder="资产名称"
            />
          </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
          <div class="input-group">
            <input
              v-model.number="good.price"
              type="text"
              class="form-control"
              placeholder="价格"
            />
          </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <!-- 阻止表单提交 -->
        <button class="btn btn-primary" @click.prevent="add">添加资产</button>
      </form>
    </div>
  </div>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.css'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      good: {
        name: '', // 名称
        price: 0, // 价格
      },
      list: localStorage.getItem('list') || [
        { id: 100, name: '外套', price: 199, time: new Date('2010-08-12') },
        { id: 101, name: '裤子', price: 34, time: new Date('2013-09-01') },
        { id: 102, name: '鞋', price: 25.4, time: new Date('2018-11-22') },
        { id: 103, name: '头发', price: 19900, time: new Date('2020-12-12') },
      ],
    }
  },
  methods: {
    del(idx) {
      this.list.splice(idx, 1)
    },
    add() {
      //解构，将this里面的good和list
      const { good, list } = this
      let { name, price } = good
      //判断输入框是否为空
      if (name == '') return
      if (price == '') return
      //将list里面最后一个对象的id拿出来+1生成新的id
      let id = list == 0 ? 1 : list[list.length - 1].id + 1

      //动态生成一个对象
      let obj = {
        id,
        name,
        price,
        time: new Date(),
      }
      //将用户输入的对象push到数组中
      list.push(obj)
      //将输入框清空
      good.name = ''
      good.price = ''
    },
  },
  computed: {
    sum() {
      return this.list.reduce((sum, item) => sum + item.price, 0)
    },
    ave() {
      return this.sum / this.list.length
    },
  },
  filters: {
    day(value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
  },
  watch: {
    list: {
      immediate: true,
      deep: true,
      handler(newValue, colValue) {
        localStorage.setItem('list', JSON.stringify(newValue))
      },
    },
  },
}
</script>

<style >
.red {
  color: red;
}
</style>

做到最后监听的时候还没有问题，最后将数据从内存中取出的时候报错this.list.reduce is not a function

然后我找到computed，计算属性中用到了reduce，仔细查看，发现自己并没有写错，然后回到代码渲染位子list定位localStorage.getItem('list') 我发现我只用了取值，并没有转换为js对象，所有报这个错误，所以，以后从后端或者服务器中取出来的数据最好用json转一下

Tofixed属性转数字的注意点

场景，生活中我们从后端拿过来的数据往往回是一个对象字符串，转JSON类型有可能也会存在字符串
运用：从后端接口处调用的一组数据，渲染到页面，此时数据的商品单价是字符串的，后来老大说我们做活动，需要计算单价，此时，因为进制的关系，经常会出现一长串小数，这时就需要我们转换了

此时我们定义一个属性，将所有结构都传递到页面都没有出现问题，

此时我们利用tofixed属性来将数据转换为保留2位小数时

此时浏览器给我们报错，说tofixed不是一个函数，无法使用，这个时候有点懵，在想我写的也没有问题，然后就去找数据源的位置，发现每一个数据都是字符串，所以使用tofixed属性

在vuex中V-map方法中，导入方法中，没加括号报错

import导入时 mapState from 'vuex'不加括号就会报如下错误

解决方式就加上去

eslint第一行书写报错

解决方法:

找到.eslintrc.js文件
在parserOptions对象加入requireConfigFile: false就可以完美解决

gitee上拉代码到本地没有node_modules

运行代码发现报错

原因node_modules的代码不是自己写的源代码，且文件较大。在项目根目录下有package.json文件，你只要把package.json放上去，然后通过运行npm install，就可以自动建立node_modules，而且这个新建立的库和之前自己的是一样的。也就是说通过管理package.json就可以了。

然后就可以正常运行啦