[JavaScript知识库]vue2.0 - layout组件（二）图标和基础配置

1. assets文件里面需要配置一些页面上使用的图标（可以自己在网上找一些图片代替）

*

2.styles页面基础样式文件

3. common.scss文件

*,
*:before,
*:after {
  box-sizing: border-box;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
p {
  margin: 0;
  padding: 0;
  color: #17233D;
}
div:focus {
  outline: none;
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.pointer {
  cursor: pointer;
  &:hover {
    color: #2479F0!important;
  }
}

.float-lf {
  float: left;
}
.float-rt {
  float: right;
}

4. pubilc.scss文件-主要是layout组件样式

$mian_color: #2b2f3a; // 头部导航颜色
$weightMain_color:rgb(23, 23, 23);  // 左侧导航颜色
$contrast_color:white;
 
.mian_color{
  color: $mian_color;
}
 
.white_color{
color:$contrast_color
}
 
body{
  margin: 0;
}
.header_container {
  position: flex;
  top: 0;
  left: 0;
  width: 100%;
  background: $mian_color;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  .logo {
    font-size: 24px;
    font-weight: 600px;
  }
}
.el-header {
  background-color:$mian_color !important;
  color: #333;
  line-height: 60px;
}
.el-aside {
  height: calc(100vh - 60px) !important;
  background: $weightMain_color;
}
.el-menu {
  border-right:0 !important
}

5. utils文件

6. Component.js文件是注册全局组件

 import Mybread from '../layout/components/Bradcrumb/index.vue' // 面包屑

// 全局组件
export default {
    install(Vue) {
        Vue.component('my-bread', Mybread)
    }
} 

7. validate.js 基础配置文件

  /**
 * Created by QIAOLEI on 22/06/15.
 */

/**
 * @param {string} path
 * @returns {Boolean}
 */
 export function isExternal(path) {
    return /^(https?:|mailto:|tel:)/.test(path)
  }
  
  export const validateMobile = (rule, value, callback) => {
    if (/^1[3-9]\d{9}$/.test(value)) {
      callback()
    } else {
      callback(new Error('请输入正确的手机号格式'))
    }
  }

8. store文件

9. app.js文件

const state = {
  sidebar: {
    opened: true // header导航栏按钮
  },
  device: 'desktop'
}

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
  },
}

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

10. settings.js文件

import defaultSettings from '@/settings'

const { showSettings, fixedHeader, sidebarLogo } = defaultSettings

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

11. getters.js文件

const getters = {
    sidebar: state => state.app.sidebar,
    device: state => state.app.device,
    token: state => state.user.token,
    avatar: state => state.user.avatar,
    staffPhoto: state => state.user.userInfo.staffPhoto,
    name: (state) => {
      return state.user.userInfo.username
    }
  }
  export default getters
  

12. index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules,
  getters
})

13. 此时会报错，因为缺少settings.js文件，需要在src下创建此文件配置就可以

14. src - settings.js

module.exports = {

    title: '项目名称',
  
    /**
     * @type {boolean} true | false
     * @description Whether fix the header
     */
    fixedHeader: false,
  
    /**
     * @type {boolean} true | false
     * @description Whether show the logo in sidebar
     */
    sidebarLogo: true
  }