vue 自定义布局
Vue扩展布局 (vue-extend-layout)
Extend the default layout or create custom layouts for your SPA Vue.js
扩展SPA Vue.js的默认布局或创建自定义布局
模板vue-cli (Template vue-cli)
If you are going to use layouts in your application, you can choose to use a pre-configured template using vue-cli.
如果要在应用程序中使用布局,则可以选择使用通过vue-cli预先配置的模板。
ktquez/layout: A full-featured Webpack + Extend layout + vue-loader setup with hot reload, linting, testing & css extraction
ktquez / layout :功能齐全的Webpack +扩展布局+ vue-loader设置,具有热重载,整理,测试和CSS提取功能
ktquez/layout-simple: A simple Webpack + Extend layout + + vue-loader setup for quick prototyping
ktquez / layout-simple :简单的Webpack +扩展布局+ + vue-loader设置,可快速进行原型制作
用法 (Usage)
NPM
NPM
npm install vue-extend-layout --save
In your src/main.js
:
在你的src/main.js
:
import Vue from 'vue'
import router from './router'
import { VueExtendLayout, layout } from 'vue-extend-layout'
Vue.config.productionTip = false
Vue.use(VueExtendLayout)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
...layout // Add methods to extend layouts
})
Attention: From now on, App.vue
will no longer be your primary file
注意:从现在开始, App.vue
将不再是您的主文件
创建和使用布局 (Create and Using layouts)
You need to create the src/layouts/default.vue
layout because it will be the main file of your application.
您需要创建src/layouts/default.vue
布局,因为它将是您应用程序的主文件。
Create a directory called
layouts/
inside the main directory of your application, usually it will be fromsrc/layouts/
在应用程序的主目录内创建一个名为
layouts/
的目录,通常是从src/layouts/
Inside the layout directory create a layout called
default.vue
在布局目录中,创建一个名为
default.vue
的布局
For example:
例如:
<template>
<div id="app">
<header />
<sidebar />
<div class="container">
<router-view />
</div>
<footer />
</div>
</template>
<script>
export default {
name: 'default' // id of the layout (required)
}
</script>
<style>
/* your style */
</style>
Note: The name you give to the layout component (name: 'default'
) will be the key to selecting the layouts in your application.
注意:您给布局组件指定的name: 'default'
( name: 'default'
)将是在应用程序中选择布局的关键。
At this point, you can check the default layout working, just run the
npm run dev
command and all the routes (pages) will load inside the default layout.此时,您可以检查默认布局是否正常运行,只需运行
npm run dev
命令,所有路由(页面)就会加载到默认布局中。
--
-
自定义扩展布局 (Custom extend layout)
To create a layout you just need to create a component within the layouts directory and name that component.
要创建布局,您只需要在layouts目录中创建一个组件并命名该组件。
For example: layouts/MyCustomLayoutLogin.vue
例如: layouts/MyCustomLayoutLogin.vue
<template>
<div>
<header-login />
<div class="container-login">
<router-view />
</div>
</div>
</template>
<script>
export default {
name: 'MyCustomLayoutLogin' // id of the layout
}
</script>
<style>
/* your style */
</style>
And to extend this layout in any the desired route, simply include the property layout: MyCustomLayoutLogin
in meta object of the route.
并要在任何所需的路由中扩展此布局,只需在路由的元对象中包括属性layout: MyCustomLayoutLogin
。
{
path: '/login',
name: 'Login',
component: () => import('@/pages/Login'),
meta: {
layout: 'MyCustomLayoutLogin' // name of the layout
}
}
Attention: The value of the layout
property must be the same as the name of the MyCustomLayoutLogin
component.
注意: layout
属性的值必须与MyCustomLayoutLogin
组件的名称相同。
创建错误布局(可选) (Create a error layout (Optional))
For example: layouts/error.vue
例如: layouts/error.vue
<template>
<div>
<h1>PAGE NOT FOUND</h1>
<router-view /> <!-- Optional -->
</div>
</template>
<script>
export default {
name: 'error' // id of the layout
}
</script>
<style>
/* your style */
</style>
And in the route add in the 'meta' object the 'layout' property with the name of the layout component, in this case 'error'.
然后在路线中的“元”对象中添加“ layout”属性和布局组件的名称,在本例中为“错误”。
{
path: '*',
name: 'Error',
// component: () => import('@/pages/Error') (Optional)
meta: {
layout: 'error' // name of the layout
}
}
Webpack (Webpack)
In your webpack file check for an alias (@) to the main directory of your application, typically.
通常,在Webpack文件中,检查应用程序主目录的别名(@)。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
The 'vue-extend-layout' uses this alias (@), if it does not have or the main path is another, add that alias (@) to the path that contains the 'layouts' directory you created.
'vue-extend-layout'使用此别名(@),如果没有别名或主路径是另一个别名,则将该别名(@)添加到包含您创建的'layouts'目录的路径中。
文章和截屏 (Articles and Screencast)
In development
开发中
翻译自: https://vuejsexamples.com/extend-the-default-layout-or-create-custom-layouts-for-your-spa-vue-js/
vue 自定义布局