一、使用vue-cli搭建專案
1.安裝vue-cli:安裝好node，直接全域性安裝vue-cli:
npm install -g vue-cli
複製程式碼安裝完成後，使用vue-V檢視是否安裝成功
vue init webpack Vue-Project
//其中webpack是模板名稱，Vue-Project是自定義的專案名稱
複製程式碼命令執行之後，會在當前目錄生成一個以該名稱命名的資料夾：
cd Vue-Project進入專案目錄，使用npm安裝相關依賴
npm install
複製程式碼啟動專案：
npm run dev
複製程式碼如果瀏覽器開啟之後，沒有載入出頁面，有可能是本地的 8080 埠被佔用，需要修改一下配置檔案 config>index.js
二、vue.js程式啟動執行時，遇到Unexpected tab character問題
在vuejs程式啟動時，會遇到一種常見問題，在終端報錯：Unexpected tab character。如下圖：
三、v-for 列表資料渲染完後如何重新渲染
<select class="dept_select select-change" data-placeholder="請選擇" style="width: 180px;" name="academys" id="academys" data-rule-required="true" v-model="Academyselect">
<option v-for="item in academyList" v-bind:value="item.id">
{{ item.academyName }}
</option>
</select>
複製程式碼當option列表渲染完成之後，如果資料改變需要重新渲染列表，解決方案為：
把academyList替換為新陣列。官網文件以下兩種資料變化vue無法檢測:1.通過索引修改值;2.改變陣列長度。賦值新陣列不屬於以上兩種，有資料改變，就會有更新，記得在對應vue例項中定義academyList:[]這個陣列，然後方法中賦值this.academyList就可以。
四、vue中src實現資料繫結遇到的問題
在vue2中，src實現資料繫結稍不留神就不成功。假定value.src是繫結的資料。 常見錯誤寫法1：
<img src="value.src">
複製程式碼錯誤之處在於： 1.屬性值資料繫結應該用v-bind，應該寫成v-bind:src="" 2.直接用引號"value.src"會報錯，取不到值。 常見錯誤寫法2：
<img src="{{value.src}}">
複製程式碼常見錯誤寫法3：
<img src="{value.src}">
複製程式碼以上均會報錯。正確寫法：
<img :src="value.src">
複製程式碼五、vue頁面中的定時器或者滾動事件報錯
當vue專案中的元件被移除後，元件中的定時器和頁面滾動事件並不會跟隨元件一起移除掉，因此會導致出現一些錯誤，或影響其它元件的正常執行。
因此離開該頁面需要移除這個監聽的事件,destroyed在元件移除後執行。
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
}
複製程式碼六、vue中使用定時器時this指向問題
箭頭函式中的this指向是固定不變（定義函式時的指向），在vue中指向vue; 普通函式中的this指向是變化的（使用函式時的指向），誰呼叫的指向誰。
created () {
setInterval(() => { console.log(this) }, 1000) // 箭頭函式中this指向vue
setInteval(function () { console.log(this) }, 1000) // 普通函式中this指向window,因為setInterval()函式是window物件的函式
}
複製程式碼在vue的定時器函式中如果要使用普通函式，要使用了一個變數來當中間值：
ready: function(){
let self = this;
setInvertal(function(){
for(let k in self.goods_list){
.......
}
}, 1000)
}
複製程式碼七、vue-router 頁面切換後保持在頁面頂部而不是保持原先的滾動位置的辦法
vue-router有提供一個方法scrollBehavior，它可以使切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新載入頁面那樣。 這個功能只在 HTML5 history 模式下可用。
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動到哪個的位置
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})
複製程式碼八、vue關於父元件呼叫子元件的方法
父元件： 在子元件中加上ref即可通過this.$refs.ref.method呼叫
<template>
<div @click="parentMethod">
<children ref="c1"></children>
</div>
</template>
<script>
import children from 'components/children/children.vue'
export default {
data(){
return {
}
},
computed: {
},
components: {
'children': children
},
methods:{
parentMethod() {
console.log(this.$refs.c1) //返回的是一個vue物件，所以可以直接呼叫其方法
this.$refs.c1.childMethod();
}
},
created(){
}
}
</script>
複製程式碼九、關於Vue背景圖打包之後訪問路徑錯誤問題
通過vue-cli腳手架建立的vue專案，注意相對路徑標識’./’,我們知道img為html標籤，他的路徑是由index.html開始訪問的，他走./static/img/'圖片名'是能正確訪問到圖片的，所以img的路徑沒問題，然後app.css訪問./static/img/'圖片名'是訪問錯誤的，因為在css目錄下並沒有static目錄。這樣就造成了路徑訪問失敗的問題。 解決辦法：
1.檢查config檔案中的assetsPublicPath是否設定為’/’而不是’./’ ,注意區分’/’為絕對路徑，絕對路徑從網站靜態伺服器根目錄查詢/static/img/圖片，這樣的路徑就是正確的，如果設定為’./’，路徑就變成了相對路徑，相對路徑會根據相對的檔案目錄來確定檔案資源，會造成上面分析的問題 2.vue-cli建立的vue專案，會自帶一個static目錄，將出錯圖片放在該目錄下面即可（正確解決辦法） 檢視vue-cli建立專案的webpack配置檔案可以找到一個將static目錄拷貝到dist目錄中。根據對資源的規劃不同，將需要打包的資源放在src/assets目錄中，不需要打包的資源放入static目錄中。
十、vue2繫結內聯樣式background的一些坑
有一個需求是，給一個盒子新增一個背景圖片，這個背景圖片是動態請求回來的，那麼應該怎麼做？ 正常情況下的vue內聯樣式如下寫法：
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
複製程式碼此時的style繫結的是一個JavaScript物件，在JavaScript中不允許出現 "-" ，那麼繫結一個背景圖片應該這麼寫：
<div :style="{background: 'url('+ img +')'，backgroundSize:cover }"></div>
data:{
img:'xxx.png'
}
複製程式碼將圖片改為動態請求回來的：
<div :style="{background: 'url('+ img +')'，backgroundSize:cover }"></div>
data:{
img:'xxx.png'
},
methods:{
// 虛擬碼 請求資料
getImg(){
this.$http.get().then(function (e) {
this.img = e.data //將資料賦值給img
}.bind(this))
}
}，
created(){
// 呼叫函式
this.getImg()
}
複製程式碼因為在生命週期 mounted 之前都是虛擬dom 也就是說 當頁面已經渲染完，但是vue還沒執行，所有資料丟失，此時我們加上
<div v-if='img ' :style="{background: 'url('+ img +')'，backgroundSize:cover }"></div>
複製程式碼表示有img屬性的時候我們選擇這個元素,至此就成功繫結背景圖片了。