要知道 做這一行 學(xué)新技術(shù)不只是為了功利，那樣你總會(huì)疲憊走不遠(yuǎn)。
什么時(shí)候你能因?yàn)榕d趣去閱讀源碼，從模仿到造輪子，什么時(shí)候你能對(duì)不止前端的東西感興趣，比如玩玩單片機(jī)，自己學(xué)著搭建集群，測(cè)試并發(fā)，研究研究數(shù)據(jù)庫優(yōu)化，用python寫個(gè)web服務(wù)器等等，你就不會(huì)有現(xiàn)在的煩惱了。
當(dāng)然，玩，每一項(xiàng)得玩精了。

webpack打包vue項(xiàng)目，會(huì)把css部分提取到單獨(dú)的css文件中，這樣造成了圖片路徑引用錯(cuò)誤，一般這種資源都是放在static目錄下，然后引用('/static/...')

你可以試試moment.js這個(gè)插件moment.js文檔

jquery有現(xiàn)成的data方法不用，非要去用attr....

<a id="demo" data-href="test">取消</a>

$("#demo").on('click', function(){
    console.log($(this).data("href"));
});

極其不推薦使用onclick()這樣的方式寫點(diǎn)擊事件，其他事件也是一樣的，耦合太高，可維護(hù)性極低。
極其不推薦使用onclick()這樣的方式寫點(diǎn)擊事件，其他事件也是一樣的，耦合太高，可維護(hù)性極低。
極其不推薦使用onclick()這樣的方式寫點(diǎn)擊事件，其他事件也是一樣的，耦合太高，可維護(hù)性極低。

減少彈窗輸出內(nèi)容

Vue.js中的圖片引用路徑的方式:
第一種：按照正常HTML語法引用路徑

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {}
  }
}
</script>

第二種：使用import方式

<template>
  <div id="app">
    <img :src="logoSrc">
    <router-view/>
  </div>
</template>

<script>
import logoSrc from './assets/logo.png'
export default {
  name: 'App',
  data () {
    return {
      logoSrc: logoSrc
    }
  }
}
</script>

第三種：使用require方式

<template>
  <div id="app">
    <img :src='require("./assets/logo.png")'>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {}
  }
}
</script>

返回到您的問題，也直接給您做了一個(gè)demo：

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in arr" :key="index">
         <!--這個(gè)地方用了ES6的模板字符串，模板字符串是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)-->
        <img :src="require(`./assets/logo${index}.jpeg`)" alt=""> 
        <p>{{item.text}}</p>
      </li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      arr: [{
        text: '111'
      }, {
        text: '222'
      }, {
        text: '333'
      }]
    }
  }
}
</script>

效果如下：

把myarea換成計(jì)算屬性

myarea() {
        for (let i = 0; i < this.cityData.length; i++) {
            if (this.cityData[i].text == this.selected) {
          return this.cityData[i].area[0].text;
        }
        }
    }  

順便你這個(gè)寫的判斷是否是選擇的city是不是有點(diǎn)暴力了

router里寫的 /News, router-view寫的/news

你服務(wù)器端用的是 http，客戶端請(qǐng)求用 https 當(dāng)然有問題。

你在main.js 配置 引入iview

vue-router這種格式引入實(shí)際只是通過webpack依賴方式把他引進(jìn)來，而你需要一個(gè)文件(對(duì)象)。你想要一個(gè)包含方法集合或某個(gè)狀態(tài)的對(duì)象（文件） 所以必須 ./router 這樣形式真實(shí)引入

沒理解可以看看相關(guān)的webpack文章

你把index == 4放到transitionEnd里執(zhí)行，在動(dòng)畫沒有結(jié)束的時(shí)候如果鼠標(biāo)不停點(diǎn)擊，index會(huì)持續(xù)增加：

這樣當(dāng)transitionEnd執(zhí)行時(shí)，index == 4就不會(huì)成立，所以后面的邏輯都不會(huì)執(zhí)行，也就造成了translate3d的值不斷增加顯示空白。

你寫的有問題，事件應(yīng)該綁定在login.vue中最外層div中，并且這個(gè)div高度100%;

不同尺寸頁面的rem初始化（html的font-size屬性）是通過js來設(shè)置的，你在寫css時(shí)只要設(shè)置個(gè)固定的基準(zhǔn)值，然后寬度按照基準(zhǔn)值轉(zhuǎn)化成rem就好了。

知道了 6666

  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }

全局匹配影響的
lastIndex：下一個(gè)匹配的索引值。（這個(gè)屬性只有在使用g參數(shù)時(shí)可用)
在全局匹配下，匹配成功后正則表達(dá)式的lastIndex會(huì)增加，若開始為0，如果上一次匹配成功了。lastIndex就會(huì)變?yōu)?，而進(jìn)行一下個(gè)字母比較就是從位置1開始比較的，你第二個(gè)為配，只有一個(gè)，lastIndex為0的話可以匹配，但是為1，找配后面的字符串找不到，所以匹配失敗，失敗后lastIndex變?yōu)?，下次從0開始搜索，中匹配成功....

 var arr2 = ["匹","配","中","文"];
var pattern1 = /[\u4e00-\u9fa5]+/g;
for (var i = 0; i < arr2.length; i++) { 
    console.log(pattern1.lastIndex) //0 1 0 1
    if (pattern1.test(arr2[i])) {
        console.log(arr2[i]);    // 匹，中
    }
}

由上可知，若想顯示，lastIndex是逐漸增加的，類似于下面的才能顯示出來

 var arr2 = ["匹","配配","中中中","文文文文"];

所以應(yīng)該去掉/g,或者循環(huán)時(shí)將lastIndex重置為0

var pattern1 = /[\u4e00-\u9fa5]+/g;
for (var i = 0; i < arr2.length; i++) { 
    pattern1.lastIndex=0; 
    if (pattern1.test(arr2[i])) {
        console.log(arr2[i]);    
    }
}

1.在url的查詢參數(shù)中加入版本參數(shù)，例如:
http://url.com/?v=2333
瀏覽器會(huì)因?yàn)閰?shù)不同而向服務(wù)器發(fā)出請(qǐng)求，但是服務(wù)器是不會(huì)管你參數(shù)是不是一樣，只要url是同一個(gè)，就會(huì)返回同一個(gè)文件。
2.可以在參數(shù)中加hash=hgfdxjkk.

rules 放一個(gè)數(shù)組可以嗎。當(dāng)然有一個(gè)一定可以的方法，就是 :rules="{validator: validateInput, trigger: 'blur'}" 然后在 data 里面聲明一個(gè) validateInput 方法，具體可以參照 iview 的自定義驗(yàn)證。

想了一個(gè)辦法，但是感覺不是最好的辦法，處理方式如下：
通過遞歸遍歷所有的子節(jié)點(diǎn)，然后根據(jù)后臺(tái)傳過來的所選節(jié)點(diǎn)id匹配，判斷該遍歷的節(jié)點(diǎn)id和后臺(tái)所選id比較，比較為true就會(huì)進(jìn)行setChecked操作
1、在頁面生命周期的created事件中，執(zhí)行菜單樹的根節(jié)點(diǎn)遍歷方法

created() {
    this.foreachMenuRoot()
},

2、遍歷有兩個(gè)坑
2.1、頁面初始化的時(shí)候this.$refs.tree還是undefined未定義
2.2、當(dāng)created將頁面元素加載完成后this.$refs.tree.children菜單樹還沒加載完，所以也是undefined未定義（ps：請(qǐng)求后臺(tái)那數(shù)據(jù)會(huì)有一定的延遲，樹的數(shù)據(jù)加載過程也會(huì)有一定的延遲）

foreachMenuRoot() {
      // 遞歸勾選菜單樹
      const _this = this
      // 由于目前頁面created加載的時(shí)候this.$refs.tree樹還未加載完成，所以非空判斷
      if (this.$refs.tree !== undefined && this.$refs.tree.children !== undefined && this.$refs.tree.children !== null) {
        this.$refs.tree.children.forEach(function(node) {
          if (_this.form.menuIds.indexOf(node.id) !== -1) {
            _this.$refs.tree.setChecked(node.id, true, false)
          }
          if (node.children !== undefined && node.children !== null && node.children.length > 0) {
            _this.whileMenuIdsCheckedElTree(node)
          }
        })
        this.formLoading = false
      } else {
        // 由于數(shù)據(jù)未能及時(shí)加載完成，做一個(gè)定時(shí)循環(huán)去執(zhí)行
        setTimeout(() => {
          _this.foreachMenuRoot()
        }, 3000)
      }
    },

3、遞歸遍歷根節(jié)點(diǎn)的葉子節(jié)點(diǎn)

whileMenuIdsCheckedElTree(node) {
      const _this = this
      node.children.forEach(function(cnode) {
        if (_this.form.menuIds.indexOf(cnode.id) !== -1) {
          _this.$refs.tree.setChecked(cnode.id, true, false)
        }
        if (cnode.children !== undefined && cnode.children !== null && cnode.children.length > 0) {
          _this.whileMenuIdsCheckedElTree(cnode)
        }
      })
    }

自己不是專業(yè)的前端工程師，一直都是后端開發(fā)，如果有更好的思路和想法歡迎一起探討

給wrapper2加絕對(duì)點(diǎn)定位 設(shè)置top left值
.wrapper2{

width: 100px;
height: 100px;
padding: 20px;
position: absolute;
top:10px;
left:150px;
background: #d8d8d8;
border-radius: 5px;
display: inline-block;

}