目录
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