原先一直都在搞人工智能，突然間稀裏糊塗的開始做前端vue了，從着手學習到開始寫項目時間只有短短的一天，現在把項目遇到的大部分知識點和開發流程做個小的總結。基本上按照這個套路就可以開發一箇中等的項目，希望能幫助到其他的人。

環境配置

安裝npm

npm是nodejs的包管理工具，本人使用的是arch系統所以只需要以下命令就可以安裝

yaourt -S npm

當然ubuntu安裝的命令是

sudo apt-get install npm

安裝vuecli

有了npm之後
在終端輸入以下命令就可以安裝vue腳手架

npm install -g @vue/cli

構建項目

圖形化構建

直接在終端輸入以下命令就可以打開圖形化配置的窗口

vue ui

打開完成後會在終端裏顯示一個本地服務，用瀏覽器打開他就可以進行圖形化配置了

命令行配置

因爲我在本地ui配置的時候圖形界面打不開所以我選擇的命令行配置
在終端輸入以下命令

隨便進入一個文件夾輸入以下命令便可以進入到vue的構建項目的選項裏

vue create 你的項目名

在這裏我們選擇第二個手動選擇組件（按上下方向鍵切換選項，回車按鍵選中）選中後我們會進入這樣的位置

同樣選擇上下方向鍵切換選項，空格鍵選中
在這裏我們選中router和vuex

回車確定

這裏問我們是否要安裝舊版本的router 我們選擇n

在這裏推薦選擇第三項ESLint+Standard config

第一項

這裏問我們設置是要有單獨的文件夾還是全寫在package.json裏
我們選擇第一項

這裏問我們是否保存預設的組件，我們選擇是，這會在之後的項目中加入模板爲你提供參考
創建完成項目後我們輸入

cd 你剛纔的項目名

這樣會進入你的項目目錄
在這個目錄下我們輸入

npm run serve

這樣會編譯並運行項目，之後會在命令行提示兩個地址
第一個是你本地的地址
第二個就是你外網地址

隨便打開一個網址就可以看到這樣的畫面

在這裏點擊about又會變一種樣式

這就是我們所謂的前端路由

代碼目錄

近來之後用vs code打開項目所在文件夾
可以看到以下目錄

其中這裏主要在意src目錄
components是你組件的目錄
ruter是前端路由的配置目錄
store是狀態管理vuex的目錄
views是視圖目錄
main.js是配置文件

vue-router

vue-router是一個vue生態裏管理前端路由的一個組件
因爲他默認就已經寫好了一個前端路由所以我們先來看一下這個

定義組件

組件的作用

組件是幹嘛的呢？
組件就是爲了方便的進行代碼重用而定義的
可以想象是把組件裏的html代碼插入到需要他的地方

如何定義組件

一個組件呢就是把html代碼寫在標籤裏頭
如

<!-- 格外注意 這裏不支持text標籤 text標籤全部換成span -->
<template>
  <div class="about">
    <h1>123</h1>
    <p>abc</p>
  </div>
</template>
  <!-- 注意這裏必須有一個回車，而且每一段代碼後面都不能有空格出現 -->

把html需要的css文件在main.js裏引入就像下面這個樣子

import '../static/css/about.css'
import '../static/css/mainstyle.css'

這樣我們一個組件就定義好了，那怎麼用呢

在需要他顯示的html代碼下面聲明組件

因爲vuecli規定的所有頁面都是組件，只不過有父與子的區別
所以下面這段代碼以父組件爲例

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld/><!-- 1 -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'//2

export default {
  name: 'Home1S',//3
  components: {
    HelloWorld //4
  }
}
</script>

通常用不同的組件需要改四個地方
位置1:組件插入的位置，標籤裏的名稱必須和2,4相同
位置2:引入組件，注意名稱和路徑就可以了，名稱必須和1,4相同
位置3:名字隨便起
位置4:聲明組件，多個組件聲明用逗號隔開，名稱必須和1，2相同
注意事項
這裏的script代碼必須嚴格按照
兩個空格縮進，
字符串用單引號，
括號附近有空格‘ () ’
運算符附近必須有空格’ + ’
冒號後面要有空格‘: ’
等嚴格的格式控制

定義路由跳轉

聲明一個路由

在src/router/目錄下有一個index.js文件
打開他
在routes數組後添加一個對象如下

 {
    path: '/about',//將來這個名稱會在導航欄顯示，被稱之爲哈希
    name: 'About',//隨便起但後面會用到
    component: () => import('../views/About.vue')//跳轉組件地址 和前面組件跳轉一個樣子
  }

定義路由交互組件

我們這裏用
包裹住的所有標籤最後都會成爲跳轉的可交互標籤，同時這個標籤可以定義樣式，（事實上它本身會默認渲染成a標籤）如

	  <router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link>

定義路由組件顯示位置

我們在需要路由轉換的位置加上標籤即可
如

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

vue 語法

這裏的語法和其他開發的形式不太相同但可以看出來大體是相同的

v-text和插值表達式

我們在about.vue文件裏實驗一下以下代碼
注意一定是about.vue別自己建一個就來，這裏涉及到組件引用我們之後在說

<template>
  <div class="about">
    <h1 v-text="a">安琪拉</h1>
    <h1>{{a}}安琪拉</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: 'hello'
    }
  }
}
</script>

說白了就是將v-text屬性的標籤或者{{}}雙括號裏引入的變量與數據綁定數據會被實時渲染上去
a可以是列表、對象等等等等、語法按照js語法就可以

v-html

這個組件會把變量當作html代碼解析

<template>
  <div class="about">
    <h1 v-text="a">安琪拉</h1>
    <h1 v-html="a"></h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: '<h1>asd</h1>'
    }
  }
}
</script>

v-on 或者 @

綁定事件的組件事件有什麼鼠標點擊，雙擊等等等等

<!-- v-on:keyup.enter -->
<template>
    <h1 @click="click">{{a}}</h1>
</template>
<script>
export default {
  data () {
    return {
      a: 1
    }
  },
  methods: {
    click: function () {
      this.a = this.a + 1
    }
  }
}
</script>

<!-- 回車事件 -->
<template>
  <input type = "text" @keyup.enter="click">
</template>
<script>
export default {
  data () {
    return {
      a: 1
    }
  },
  methods: {
    click: function () {
      this.a = this.a + 1
      console.log(this.a)
    }
  }
}
</script>

v-show 和 v-if

這兩個標籤唯一的不同就是v-if會讓代碼樹消失，v-shou只是不顯示

<template>
  <div>`
    <h1 @click="click1" v-show = a>{{a}}</h1>
    <h1 @click="click2" v-if = b||a>{{b}}</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: 2,
      b: 2
    }
  },
  methods: {
    click1: function () {
      this.a = this.a - 1
    },
    click2: function () {
      this.b = this.b - 1
    }
  }
}
</script>

v-bind 或者：

<template>
  <div>`
    <p @click="click" :id = a >asdf</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: '#naa'
    }
  },
  methods: {
    click: function () {
      this.a = 'nav'
    }
  }
}
</script>
<style scoped>
#nav {
  padding: 30px;
}
#naa {
  font-weight: bold;
  color: #2c3e50;
}
</style>

v-for

根據數組或者對象個數重複某個標籤，同時可以將數據遍歷出來

<template>
  <div>
    <h1 @click="click">{{a}}</h1>
    <h1 v-for="(item, name, index) in a" :key = "item">{{item}}{{name}}{{index}}</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }
}
</script>

v-model

雙向數據綁定

<template>
  <input type = "text" @keyup.enter="click" v-model="a">
</template>
<script>
export default {
  data () {
    return {
      a: 1
    }
  },
  methods: {
    click: function () {
      console.log(this.a)
    }
  }
}
</script>

axios

將token放置在請求頭

config.headers.accessToken = token;

get和post請求

// 組件中使用get方法
this.axios.get(url, parmas: {a: 1, b: 2})
  .then(res => {
    // 成功回調
  }, res => {
    // 錯誤回調
  })


// 組件中使用post方法
this.axios.post(url, {a: 1, b: 2})
  .then(res => {
    // 成功回調
  }, res => {
    // 錯誤回調
  })

vuex

vuex其實就是一個全局組件，無論在那裏都可以通過

this.$store.state.xxx

訪問儲存在裏面的狀態
Getters：用來從 store 獲取 Vue 組件數據。
Mutators：事件處理器用來驅動狀態的變化。
Actions：可以給組件使用的函數，以此用來驅動事件處理器 mutations
Vuex和簡單的全局對象是不同的，當Vuex從store中讀取狀態值的時候，若狀態發生了變化，那麼相應的組件也會高效的更新。並且，改變store中狀態的唯一途徑就是提交commit mutations。這樣便於我們跟蹤每一次狀態的變化。只要發生了狀態的變化，一定伴隨着mutation的提交。
剩下的和變量一樣

總結

vue這個東西特別簡單，當然剛入門的時候我也踩了不少的坑，不過有了一個系統的架構，學起來其實也就一天就足夠了，尤其是資源已經提供了模板的前提下。額外說一句，vuecli的嚴格模式是可以關掉的，需要的小夥伴們可以去網上查一下

Vue全家桶快速開發指南

Vue全家桶快速開發指南着手與項目