Vue前端项目-主页布局-01

目录

1、安装 sass-loader

2、全局样式

3、在 main.js 中引用全局样式

4、主页布局

5、Sidebar组件

6、重新运行项目，观察侧边栏效果

7、顶部导航条（Navbar）

8、AppMain组件

---

1、安装 sass-loader

项目中用到的 scss 来做样式文件， 所以需要先安装一下 sass-loader

npm i sass-loader node-sass -D

考虑到 npm 命令连接的是国外的网络，可能会比较慢。因此建议使用 淘宝的 cnpm 来安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

以后就可以使用  cnpm 来代替 npm 命令

2、全局样式

新建 src / assets / styles / index.scss ，内容

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

html {
  height: 100%;
  box-sizing: border-box;
}

3、在 main.js 中引用全局样式

import '@/assets/styles/index.scss' // global css

4、主页布局

先看一下，此次布局要达到的效果图

5、Sidebar组件

5.1 新建 src / layout / components / Sidebar / index.vue 组件

<template>
  <div class="">
    侧边栏组件
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {}
  },
  components: {},
  methods: {},
  computed: {}
}
</script>

<style lang="scss" scoped>
</style>

5.2 导出侧边栏组件

在 src / layout / components / index.js

export { default as Sidebar } from './Sidebar/index.vue'

5.3 在 首页中导入侧边栏组件

import { Sidebar } from './components'

5.4 将 导入的侧边栏组件注册到 首页组件中

  components: {
    sidebar: Sidebar
  }

5.5 将组件应用到首页中

<template>
  <div class="app-wrapper">
    <sidebar class="sidebar-container" />
  </div>
</template>

5.6 首页最外层 div 样式

<style lang="scss" scoped>
.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>

5.7 侧边栏容器样式

新建 src / assets / styles / sidebar.scss , 内容为:

#app {
  .sidebar-container {
    width: $sideBarWidth !important;
    background-color: $menuBg;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
  }
}

5.8 定义变量的 scss 文件

我们将 scss 文件中的变量抽出处理, 定义在 src / assets / styles / variables.scss

新建 src / assets / styles / variables.scss 文件，内容

// sidebar
$sideBarWidth: 200px;
$menuBg:#304156;

:export {
  sideBarWidth: $sideBarWidth;
  menuBg: $menuBg;
}

5.9 在全局的 scss 文件中导入 variables.scss 和 sidebar.scss

全局scss: src / assets / styles / index.scss

@import './variables.scss';
@import './sidebar.scss';

6、重新运行项目，观察侧边栏效果

7、顶部导航条（Navbar）

新建 src / layout / components / Navbar.vue 

<template>
  <div class="navbar">
    <hamburger class="hamburger-container" />
  </div>
</template>

<script type="text/ecmascript-6">
import Hamburger from '@/components/Hamburger'
export default {
  data() {
    return {}
  },
  components: {
    Hamburger
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

}
</style>

7.1 hamburger 组件

新建 src / components / Hamburger / index.vue 文件

<template>
  <div style="padding: 0 15px;">
    <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {}
}
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>

7.2 在 主页 中导入 顶部导航条（Navbar） 组件

在 src / layout / index.vue 中导入 Navbar 组件

import { Sidebar, Navbar } from './components'

7.3 注册组件

  components: {
    navbar: Navbar,
    sidebar: Sidebar
  }

7.4 使用组件

<template>
  <div class="app-wrapper">
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <navbar />
    </div>
  </div>
</template>

8、AppMain组件

新建 src / layout / components / AppMain.vue 组件

<template>
  <section class="app-main">
    app-main
  </section>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {}
  },
  components: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}
</style>

8.1 在主页中导入、注册组件并使用组件

<template>
  <div class="app-wrapper">
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <navbar />
      <app-main />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
// import AppMain from './components/AppMain.vue'
// import { AppMain, Navbar, Sidebar } from './components'
import { Sidebar, Navbar, AppMain } from './components'
export default {
  name: 'Layout',
  data() {
    return {}
  },
  components: {
    'app-main': AppMain,
    navbar: Navbar,
    sidebar: Sidebar
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>