【Vue.js】Vue.js开发报错总结

1、报错一

【报错描述】如下图

【报错原因】入口文件main.js路径配置错误。
【解决方法】如下图

2、报错二

【报错描述】如下图

【报错原因】安装webpack，webpack-cli库，修改Vue配置文件。
【解决方法】如下图

>> npm install webpack --save
>> npm install webpack-cli --save

3、报错三

【报错描述】要实现如下图效果：（该界面使用的是Vue.js的ColorUI组件库）

未读的背景颜色为红色，已读的背景颜色为绿色。
但实际实现的是下图效果：

背景颜色不随已读和未读变化。
【报错原因】
背景颜色不随已读和未读变化的代码如下：

<template>
	<view style="">
		<text stlye="display:inline-block;width: 35px; height: 25px; padding: 2px 8px; color: white; border-radius: 12px; margin-top: 4px; background-color: warnInfo[i-1].isRead?green:red" class="text-grey">
			{
    { warnInfo[i-1].isRead?'已读':'未读' }}
		text>
		<text style="display: inline-block; width: 140px; height: 25px; font-size: 4px; margin-left: 4px; margin-top: 4px;" class="text-grey">{
    { warnInfo[i-1].timestamp}}text>
		<text style="display: flex;" class="text-grey">地点:{
    { warnInfo[i-1].area }}text>
		<text style="display: flex;" class="text-grey">类型:{
    { warnInfo[i-1].type }}text>
	view>
template>

<script>
  export default {
      
    name: "warnInfo",
    data() {
      
      return {
      
        //表单项
        warnInfo: [{
      
          isRead: false,
          timestamp: "2017-08-12 23:12:12",
          area: "xx村",
          type: "垃圾已满"
        }, {
      
          isRead: true,
          timestamp: "2017-08-12 22:01:09",
          area: "xx村",
          type: "滞留"
        }, {
      
          isRead: true,
          timestamp: "2017-08-12 22:01:09",
          area: "蒙A 0000000",
          type: "车辆驶出区域"
        }]
     }
   }
 }
script>

不能实现效果。
【解决方法】换一种方式，用 v-if 实现：

<template>
	<view style="">
		<text stlye="display:inline-block;" class="text-grey">
			<span style="background-color: green;" class="isRead-style" v-if="warnInfo[i-1].isRead==true">已读span>
			<span style="background-color: red;" class="isRead-style" v-if="warnInfo[i-1].isRead==false">未读span>
		text>
		<text style="display: inline-block; width: 140px; height: 25px; font-size: 4px; margin-left: 4px; margin-top: 4px;" class="text-grey">{
    { warnInfo[i-1].timestamp}}text>
		<text style="display: flex;" class="text-grey">地点:{
    { warnInfo[i-1].area }}text>
		<text style="display: flex;" class="text-grey">类型:{
    { warnInfo[i-1].type }}text>
	view>
template>

<script>
  export default {
      
    name: "warnInfo",
    data() {
      
      return {
      
        //表单项
        warnInfo: [{
      
          isRead: false,
          timestamp: "2017-08-12 23:12:12",
          area: "xx村",
          type: "垃圾已满"
        }, {
      
          isRead: true,
          timestamp: "2017-08-12 22:01:09",
          area: "xx村",
          type: "滞留"
        }, {
      
          isRead: true,
          timestamp: "2017-08-12 22:01:09",
          area: "蒙A 0000000",
          type: "车辆驶出区域"
        }]
     }
   }
 }
script>

<style>
	.isRead-style {
      
	    width: 35px;
	    height: 25px;
	    padding: 2px 8px;
	    color: white;
	    border-radius: 12px;
	    margin-top: 4px;
	}
style>

即可实现上述效果。
该写法同样适用于Element-UI：

1. 根据table中数据不同改变颜色（正数颜色为红色，负数颜色为绿色）

<el-table-column prop="sharesReturn" label="盈亏(元)">
	<template scope="scope">
		<span v-if="scope.row.sharesReturn>=0" style="color:red">{
    { scope.row.sharesReturn }}span>
		<span v-else style="color: #37B328">{
    { scope.row.sharesReturn }}span>
	template>
el-table-column>
<el-table-column prop="strategyEarnings" label="盈亏比">
	<template scope="scope">
		<span v-if="scope.row.strategyEarnings>=0" style="color:red">{
    { scope.row.strategyEarnings }}span>
		<span v-else style="color: #37B328">{
    { scope.row.strategyEarnings }}span>
	template>
el-table-column>

1. 根据table中数据不同显示对应的内容（1数字表示买，-1数字表示卖）

实现方式一：

<el-table-column prop="direction" label="买卖方向">
	<template slot-scope="scope">
		<span v-if="scope.row.direction=== 1">买span>
		<span v-if="scope.row.direction=== -1">卖span>
	template>
el-table-column>

实现方式二：

<template>
	<el-table-column prop="direction" label="买卖方向" :formatter="statedirection">el-table-column>
template>

<script>
// 买卖方向
statedirection(row) {
      
  if (row.direction === 1) {
      
    return "买";
  } else if (row.direction === -1) {
      
    return "卖";
  }
}
script>

4、使用“天地图-国家地理信息公共服务平台”加载国内地图

网址如下：https://www.tianditu.gov.cn/
天地图API网址：http://lbs.tianditu.gov.cn/api/js4.0/guide.html
用vue-cli安装esri-loader：

npm install esri-loader --save

使用Vue CLI和ESRI Loader创建ArcGIS API for JavaScript框架：https://baijiahao.baidu.com/s?id=1671006315135298755&wfr=spider&for=pc

5、uni-app安装

uni-app安装到建立项目开发环境：https://blog.csdn.net/weixin_44770377/article/details/101197498?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allfirst_rank_v2~rank_v25-1-101197498.nonecase&utm_term=uniapp%20%E6%80%8E%E6%A0%B7%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96