ok，有了基礎的環境，就可以寫功能了，首先要實現的功能就是 登陸驗證，這個時候我們還需要建一個數據庫，我在本地建了個數據庫，添加了一個簡單的表 user：

user 表的 name 欄位是用來儲存使用者的名字的，而 username 和 password 則是對應的賬號密碼，考慮到大多數人反感填太多註冊資訊，只留了個手機號的欄位，為之後可能存在的邏輯做預留。
之前細心的童鞋可能發現我用了兩個域名，yii.com 和 vue.com ，於是在愉快地 ajax 通訊前還需要解決一下跨域問題。
利用 yii2 的 Cors過濾器：
home/controllers/SiteController.php

<?php

namespace app\home\controllers;

use yii\filters\Cors;
use yii\helpers\ArrayHelper;
use yii\web\Controller;


class SiteController extends Controller
{
    public $defaultAction = 'test';

    public function behaviors()
    {
        return ArrayHelper::merge([
            [
                'class'
 
 => Cors::className(),
                'cors' => [
                    'Origin' => ['http://vue.com'],
                    'Access-Control-Allow-Credentials'=> true,
                ],
            ],
        ], parent::behaviors());
    }


    public function actionTest(){
        echo 'Hello World'
 
;
    }

}

如果對 yii2 過濾器還不瞭解的點這裡，至於這裡用到的 ArrayHelper 助手類，也建議瞭解一下。
ok，後端搞定了，前端也要配合用跨域提交，我在 src/assets/js/ 添加了一個公用的 js 檔案 public.js

import $ from 'jquery';

export const $post = (url, data)=>{
    return $.ajax({
        url: url,
        data: data,
        type: 'post',
        crossDomain: true,
        xhrFields: {
            withCredentials: true
        }
    })
}

export const $get = (url) => {
    return $.ajax({
        url: url,
        type: 'get',
        crossDomain: true,
        xhrFields: {
            withCredentials: true
        }
    })
}

然後在 app.vue 中引用：

<template>
    <div id="app">
        <button @click='post'>點選</button>
    </div>
</template>

<script>
    import {$post, $get} from './assets/js/public'


    export default {
        name: 'app',
        methods: {
            post (){
                $post('http://yii.com', {data: 'msg'})
                    .then(console.log)
            }
        }
    }
</script>

點選效果如圖，完美解決跨域問題。

跨域解決了，還需要配置一下資料庫，在yii config/web.php 中加入資料庫元件：

<?php

$params = require(__DIR__ . '/params.php');
$db     = require(__DIR__ . '/db.php');

$config = [
    'id'            => 'demo',                  // 應用id
    'params'        => $params,                 // Yii::$app->params 的值
    'language'      => 'zh-CN',                 // 語言中文
    'basePath'      => dirname(__DIR__),        //
    'bootstrap'     => [],                      //
    'defaultRoute'  =>'home',                   // 預設路由
    'components'    => [
        /* 請求處理元件 */
        'request' => [
            'enableCookieValidation' => false,
            'enableCsrfValidation' => false,
        ],

        /* 路由美化元件 */
        'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
        ],

        /* 資料庫元件 */
        'db' => $db,

    ],
    'modules' => [
        /* home模組 */
        'home' => 'app\home\module'
    ]
];

return $config;

真正的資料庫配置在同目錄 db.php 中：

<?php

return [
    'class' => 'yii\db\Connection',
    'dsn' => 'mysql:host=localhost;dbname=test',
    'username' => 'root',
    'password' => 'root',
    'charset' => 'utf8',
];

至於 request 元件的配置是關閉 yii2 預設的 表單驗證和cookie驗證的，這兩個在前後端分離的情況下沒啥用，不關則會影響 ajax 。資料庫配置好就要建 AR 類了，這個等明天再講好了。