關於vue專案啟動報錯Error:Cannot find module 'array-includes'解決方法

找到專案中的node_modules檔案 刪除它；重新install安裝所需依賴即可

node vue，用ts 寫

ts監聽資料變化 resource 這個就是要監聽的

@Watch('resource')
  getC(){
    this.getOption()
    console.log("resource:" + this.resource);
  }

用avue上傳不傳送請求

要宣告Window

import { AxiosStatic } from "axios";

declare global {
  interface Window {
      axios: AxiosStatic
  }
}
 

avue傳送請求，路徑不對

在avue.js中給值,avue.js是匯入avue的

import axios from 'axios'
window.axios = axios.create({
    baseURL:'http://localhost:3009'
  })

Vue專案中eslint提示 'xxx' is defined but never used

在package.json，找到eslintConfig，在rules中加上"no-unused-vars": "off"

"rules": {
      "no-unused-vars": "off"
    }

設ESLint規則，忽略指定錯誤，例如no-console

在package.json，找到eslintConfig，在rules中加上 "no-console": "off"

"rules": {
      "no-console": "off"
    }

vue中使用jquery報錯 $ is not defined

在package.json，找到eslintConfig，加上jquery

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "$": true,
      "jquery":true
    },

'Swiper' is defined but never used no-unused-vars

在let Swiper = new Swiper();名字不要一樣

let mySwiper = new Swiper();

.error Delete ␍ prettier/prettier

關掉prettier格式化，在.eslintrc.js rules中加上
"prettier/prettier": "off"

vue-cli -- build時自動清除console

1.方法一

安裝 babel-plugin-transform-remove-console
修改 babel.config.js 檔案

const plugins = []
if (process.env.NODE_ENV === 'production') {
  plugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins
}

2.方法二

安裝terser-webpack-plugin
修改 babel.config.js 檔案

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack: config => {
    config
      .optimization = {
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              compress: {
                drop_console: true
              }
            }
          })
        ]
      }
  }
}

vue-cli -- build時配置靜態檔案路徑

1.新建vue.config.js
2.在裡面配置資訊

module.exports={
    outputDir:__dirname+'/dist',            //輸出檔案路徑
    publicPath: process.env.NODE_ENV === 'production'       //靜態檔案路徑
    ? './'
    : './'
}

vue 專案打包，防止原始碼暴露

在vue.config.js加上

productionSourceMap: false,

vue 賦值時，賦值檢視不更新，用$set 也不更新，可以先用this.$delete刪除，在this.$set賦值

this.$delete(this.formData,"src")
this.$set(this.formData, "src", this.formData.src)

修改table列裡的資料時，修改資料，裡面的內容也跟著變了，是因為直接賦值是淺拷貝，拷貝了地址，要用深拷貝才行，只拷貝資料

１.暴力轉換

this.editForm = JSON.parse(JSON.stringify(row));

２.用ｅｓ６的結構賦值
this.from　＝　{...row}

vue3.0專案報錯 Cannot find module 'vue-loader-v16/package.json'

1.更新npm

npm i -g npm

2.忽律可選依賴

npm install --no-optional --verbose

3.刪除node_modules,在重新下載

nmp i

最好重新啟動

Cannot read property '_withTask' of undefined

在Vue使用中報這個錯，那一定是你 的引用找不到才會導致，

比如說，你的@click事件，如下：

<button @click="clickS" />

其實，你的 clickS方法並不存在，編譯一開始沒啥毛病，等你執行資料的時候，各種問題，如果頁面資料量過大的時候，問題很難定位到哪裡！
解決方法：
先寫方法，後呼叫！

vue2.x 圖片引入

1.如果static裡有圖片直接放入public裡，可以直接引入
1.1 頁面引入

<img src="static/img/1.jpg" alt="">

1.2 css引入

.main{
  background: url("static/img/main2.png") no-repeat center;
  background-size: 100%;
  height: 218px;
  width: 300px; 
}

2.直接放在外層，就在vue.config.js裡配置別名

'@static': path.resolve(__dirname, 'static'),

2.1 頁面引入

<img src="@static/img/1.jpg" alt="">

2.2 css引入

.main{
  background: url("~@static/img/main2.png") no-repeat center;
  background-size: 100%;
  height: 218px;
  width: 300px; 
}

vue引入外部jquery

1.直接引入外部jquery.js檔案
注：/* eslint-disable*/ 這個得加，不然eslint檢查會報錯

import '@static/js/jquery.js' /* eslint-disable*/ 

然後頁面使用console.log($('.main'))，
能使用就說明引入成功