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