介绍
vue-cli-plugin-layouts 是一个 Vue CLI 插件，旨在为 Vue.js 应用程序提供多个静态布局。它使用 Vue Router 和 Vuex 实现，并支持自定义布局。使用该插件，你可以快速构建出具有多种布局的复杂应用。
安装
使用该插件前，你需要确保安装了以下依赖：
- Vue CLI（版本 >= 3.0）
- Vue Router
- Vuex
然后，在你的 Vue CLI 项目中安装该插件：
vue add vue-cli-plugin-layouts
使用
本插件提供两种布局，分别是 DefaultLayout 和 FullPageLayout。它们都在 layouts 目录下：
-- -------------------- ---- -------
-- -----------------------------
----------
-----
--------
---- ------ ------- ---
---------
------
---- ---- ------- ---
-------
--------
---- ------ ------- ---
---------
------
-----------
--------
------ ------- -
----- ---------------
-- ---
-
----------- -------------------- ---- -------
-- ------------------------------
----------
-----
---- ---- ---- ------- ---
------
-----------
--------
------ ------- -
----- ----------------
-- ---
-
---------为了使用这些布局，你需要在你的路由配置中指定它们。比如：
-- -------------------- ---- -------
-- -------------------
------ --- ---- -----
------ ------ ---- ------------
------ ------------- ---- -----------------------------
------ -------------- ---- ------------------------------
---------------
------ ------- --- --------
------- -
-
----- ----
---------- --------------
--------- -
-
----- ----
----- -------
---------- -- -- --------------------------
--
-
----- ---------
----- --------
---------- -- -- ---------------------------
--
-- ---
-
--
-
----- ---------
---------- ---------------
--------- -
-
----- ----
----- --------
---------- -- -- ---------------------------
-
-
--
-- ---
-
--上面的代码指定了 / 路径使用 DefaultLayout 布局，/login 路径使用 FullPageLayout 布局。
自定义布局
默认提供的两种布局可能无法完全满足你的需求。在这种情况下，你可以自定义布局。
首先，在 layouts 目录下创建一个新的 Vue 组件，比如 MyLayout.vue。
-- -------------------- ---- -------
-- ------------------------
----------
-----
--------
----- ---------------------
---------
------
-------------
-------
--------
----- ---------------------
---------
------
-----------
--------
------ ------- -
----- ----------
-- ---
-
---------上面的代码创建了一个布局，它包含三个插槽（slot），分别是 header、main 和 footer。当该布局在路由配置中使用时，你可以在其子组件中使用这些插槽，比如：
-- -------------------- ---- -------
-- -------------------
------ -------- ---- ------------------------
------ ------- --- --------
------- -
-
----- ----
---------- ---------
--------- -
-
----- ----
----- -------
----------- -
------- -- -- ----------------------------------
-------- -- -- ---------------------------
------- -- -- ---------------------------------
-
-
-
-
-
--上面的代码使用了 MyLayout 布局，并将其三个插槽分别指定为 Header、Home 和 Footer 组件。
示例代码
-- -------------------- ---- -------
-- -----------------------------
----------
-----
--------
------ --------
-----
------------ -------------------------
------------ -------------------------------
------
---------
------
-------------
-------
--------
--------- ---- -- -------
---------
------
-----------
--------
------ ------- -
----- ---------------
-
----------- -------------------- ---- -------
-- ------------------------------
----------
-----
-------------
------
-----------
--------
------ ------- -
----- ----------------
-
----------- -------------------- ---- -------
-- ------------------------
----------
-----
--------
----- ---------------------
---------
------
-------------
-------
--------
----- ---------------------
---------
------
-----------
--------
------ ------- -
----- ----------
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668eed9381d61a3540cd7