這裡以背景模闆說明，前台模闆的頁面導入同理。
1： 導入頁面需要的js、css、images檔案。
在advanced/backend/web/目錄下建立存放這些檔案的統一檔案夾 這裡定義檔案名為 static （advanced/backend/web/static/） 。
2： 引入js、css檔案 。
修改檔案backend/assets/appAsset.php，添加js、css檔案，如：
public $css = [
/* BEGIN GLOBAL MANDATORY STYLES */
'static/css/bootstrap.min.css',
'static/css/bootstrap-responsive.min.css',
'static/css/font-awesome.min.css',
'static/css/style-metro.css',
'static/css/style.css',
'static/css/style-responsive.css',
'static/css/default.css',
'static/css/uniform.default.css',
/* END GLOBAL MANDATORY STYLES */
'static/image/favicon.ico',
];
public $js = [
'http://stats.g.doubleclick.net/dc.js',
'http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js',
'static/js/jquery-migrate-1.2.1.min.js',
'static/js/jquery-ui-1.10.1.custom.min.js',
'static/js/bootstrap.min.js',
'static/js/excanvas.min.js',
'static/js/respond.min.js',
'static/js/jquery.slimscroll.min.js',
'static/js/jquery.blockui.min.js',
'static/js/jquery.cookie.min.js',
'static/js/jquery.uniform.min.js',
'static/js/jquery.validate.min.js',
'static/js/app.js',
'static/js/index.js',
]; 注意： 系統提供的jquery.js和bootstarp.css版本過高，可能導緻自己的頁面引入的對應檔案沖突，在這裡可以禁用系統自帶的對應檔案，修改檔案backend/assets/appAsset.php，如下所示：
public $depends = [
'yii\web\YiiAsset', //将這條注釋掉，禁止引入系統的對應檔案
'yii\bootstrap\BootstrapAsset', //将這條注釋掉，禁止引入系統的對應檔案
]; 當然也可以在advanced\backend\config\main.php配置檔案中，配置禁用系統預設的css與js檔案。在'components'配置選項中加入配置
'assetManager' => [
'bundles' => [
'yii\web\JqueryAsset' => [
'js'=>[]
],
'yii\bootstrap\BootstrapPluginAsset' => [
'js'=>[]
],
'yii\bootstrap\BootstrapAsset' => [
'css' => [],
],
],
], 就可以達到相同的目的。
3. 加入頁面資料。
修改advanced\backend\views\layouts\main.php檔案，首先可以将原來該頁面的html元素删除掉，然後複制頁面<body></body>部分html内容進去就好了， 頁面可能需要加入js代碼， 可以這樣加入
4： 建立一個測試控制器 CommonController（名字自己定義，檔案路徑：advanced\backend\controllers\CommonController.php）
<?php
namespace backend\controllers;
use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;
// use common\models\LoginForm;
// use yii\filters\VerbFilter;
/**
* Site controller
*/
class CommonController extends Controller
{
public function actionIndex()
{
return $this->render('index');
}
} 5：建立對應的視圖檔案
建立檔案： advanced\backend\views\common\index.php
<?php
/* @var $this yii\web\View */
$this->title = '個人休閑管理平台';
?> 6： 通路對應連接配接檢視效果
http://localhost/mywork/yii2/advanced/backend/web/index.php?r=common/index
版權聲明：本文為CSDN部落客「weixin_34281537」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。
原文連結：https://blog.csdn.net/weixin_34281537/article/details/92310609
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)