vue 自定义布局_扩展SPA Vue.js的默认布局或创建自定义布局

vue 自定义布局

Vue扩展布局 (vue-extend-layout)

Extend the default layout or create custom layouts for your SPA Vue.js

扩展SPA Vue.js的默认布局或创建自定义布局

View demo 查看演示 Download Source 下载源

模板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 from src/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 自定义布局