環境配置
首先先安裝node環境，如果在windows上，直接去官網下載，選擇windows系統(.msi)，下載完成後一路安裝就好。安裝成功後，windows命令列中會多兩個命令，一個是node，一個是npm。node就是啟動vue和koa2的關鍵命令，npm是一個管理第三方外掛的包管理器，負責下載和刪除你的模組。
分別執行node -v和npm -v來檢測環境是否搭建成功，如果出現以下資訊則說明node環境已配置成功！
由於國內訪問國外的網站一般都比較卡，而npm又是國外網站，所以我們需要通過npm安裝cnpm用以代替npm
npm --registry https://registry.npm.taobao.org install cnpm -g
複製程式碼cnpm的用法和npm完全一樣，可以通過以下命令來安裝
cnpm i 模組名 -S
** i 是 install 命令的簡寫
** -S 是 --save 的簡寫,可以將模組資訊寫入專案根目錄下的package.json檔案中，package.json就是專門儲存模組資訊位置的
一般我們可以用 npm init 或者 cnpm init 初始化package.json配置檔案,就會自動在命令所執行的目錄下自動生產package.json配置資訊
** -g 或則 --global 是全域性安裝，將模組安裝到當前系統使用者的node_moudels目錄下，全域性安裝的模組可以在任何目錄下使用
複製程式碼我們可以使用
cnpm i koa -S來安裝我們需要的koa模組
在當前目錄及當前目錄的任何子目錄下，可以像這樣來引入模組
var koa = require('koa')
複製程式碼當然，vue的環境搭建是非常麻煩的，我們不推薦使用
cnpm i這樣的方式從根目錄一個資料夾一個檔案這樣方式去建立整個專案，因為這樣做你起碼會平白無故的浪費半個多小時的時間，把所有的精力都花費在了環境配置的問題上。所以，在這裡，我們推薦使用vue的腳手架，來幫我們更簡單的搭建整個專案。
全域性安裝腳手架
cnpm i vue-cli -g
// 腳手架初始化專案
vue init webpack 專案名
複製程式碼當然，如果你看到過其他部落格或者視訊教程，他們有可能會推薦你用
webpack-simple，很明顯，他們認為webpack-simple比webpack更輕量級，企業會最優先使用。當然，對於這個我不可否認。但是，如果你堅持要用webpack-simple的話，你會發現，當你引入其它第三方模組的css和js的話，你的頁面上就會報一大堆錯誤資訊，因為你的webpack.config.js這個檔案，中的css和style的loader還沒配齊全，你需要去下載，然後，當你解決了這個錯誤之後，又會有image這些圖片的格式問題等著需要你去解決，這就會非常麻煩了。為什麼我會建議你現在用webpack，因為它會幫你在學習階段省去很多不必要的麻煩，將你的注意力主要集中在vue框架的設計上，而不是去解決vue腳手架的各種loader問題。
當你執行了
vue init webpack demo之後，下面只要一路回車，在出現的時候，選擇第三個，No, I will handle that myself，前面我說過， npm太慢了，而你的windows有可能還沒安裝yarn，所以你現在先不安裝，等你自己去根目錄下，自行用cnpm i來用cnpm安裝專案所需要的模組。
在當前目錄下便會出現這麼一個資料夾，
demo，這就是你剛剛用vue腳手架建立的vue專案，目錄結構如下
| build (webpack編譯輸出js的目錄)
| config (專案環境的配置檔案)
| index.html (client端效果展示頁面)
| package.json (package.json包管理配置檔案)
| README.md (作者文件，可以忽略)
| src (專案檔案主目錄)
| App.vue (主元件，內嵌components資料夾下的所有子元件)
| main.js (程式的入口)
| router (路由url配置)
index.js (路由配置的主入口)
| components (子元件目錄)
| HelloWorld.vue (vue元件)
| asserts (資源目錄)
| logo.png
| static (靜態資源目錄)
| test (測試資料夾)
複製程式碼在有
package.json檔案的目錄下，也就是專案的根目錄，執行cnpm i命令，它會自動查詢package.json檔案中的依賴模組並下載，下載完成後，你將會看到當前目錄生成了一個node_mouldes的資料夾，這裡面就是存放了你剛剛下載的所有模組，不過這些模組只對當前目錄有效，不同於全域性安裝的模組。
以上眾多目錄中，我們目前只要關心
src目錄就可以了。其次是static目錄，你可以將js、css、img等靜態資源放入此資料夾下。
進入
src目錄main.js
import Vue from 'vue' // 引入vue框架
import App from './App' // 引入App.vue
import router from './router' // 引入路由配置資訊
// 設定為 false 以阻止 vue 在啟動時生成生產提示。
Vue.config.productionTip = false
new Vue({
el: '#app', // 元件的id值，div的id為#app時，那麼這個div標籤就是主元件
router, // 路由配置資訊
components: { App }, // 將App.vue作為元件傳入
template: '<App/>' // 相當於一個標籤，以後再html中可以像這樣使用<App/>
})
複製程式碼index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
</head>
<body>
<!-- 這個div的id值為main.js中設定的el值，那麼這個div就是主元件 -->
<div id="app"></div>
</body>
</html>
複製程式碼App.vue
<!-- 這裡可以寫html程式碼，和引入的vue元件標籤 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- router-view 這個很關鍵，它是用來做路由切換的，它會顯示成一個vue檢視，它和router資料夾的關係很大 -->
<router-view/>
<!-- 在下方的元件被掛載完成之後，這裡可以使用，有關vue元件的用法，在以後篇幅會有相關介紹 -->
<top></top>
<Nav></Nav>
</div>
</template>
<script>
// 匯出App.vue元件，這裡可以寫js程式碼
// 匯入vue元件，components資料夾就是我們先前提到過的元件資料夾
import Top from "./components/Top";
import Nav from "./components/Nav";
export default {
name: 'App',
/*
你可以像這樣把元件作為當前元件的子元件掛載到template中最外層的div上，也就是那個id為app的div。
掛載元件之前請記得要先匯入，
*/
components: {
'top': Top,
Nav, // 如果在template中要寫的名字和這個元件變數名一致，那麼這樣寫就相當於
// 'Nav': Nav 這種寫法，這是es6的新特性，key：value名稱如果相同可以簡寫成一個
}
}
</script>
<style>
/* 這裡可以寫css程式碼 */
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
複製程式碼router/index.js
// 引入Vue框架， 因為下面要使用它的use()方法將vue-router這個元件掛在到vue框架上，這樣在任何地方就可以方便的使用vue-router這個外掛了
import Vue from 'vue'
/*
引入vue-router這個專門用來做路由的外掛，這個並不屬於vue框架的一部分，他要單獨通過cnpm命令去下載。
不過vue-cli這個腳手架已經幫我們安裝好了，是不是挺方便的呢~~
*/
import Router from 'vue-router'
// 在專案建立之後，在components目錄下會預設有個HelloWorld.vue的元件，在這裡被匯入
import HelloWorld from '@/components/HelloWorld'
// 使vue-router這個外掛生效，以後this.$route就可以呼叫vue-router中定義的public屬性和方法，因為它已經屬於元件的一部分了。
// this就是每個元件script標籤下export default{}中的元件物件
Vue.use(Router)
// 匯出所有的路由配置資訊
export default new Router({
routes: [
{
path: '/', // 就好像訪問了localhost:8080/，App.vue中的<router-view/>這個標籤就顯示了HelloWorld.vue中的內容一樣
name: 'HelloWorld', // 以後在元件中通過this.$route.name就可以獲取到這個值了，詳細介紹請等續更..
component: HelloWorld // 這個名稱要和import引入的元件變數名相同
}
]
})
複製程式碼