本文仅用来个人记录备忘

安装

Github: https://github.com/coreui/coreui-free-vue-admin-template

Chaim:workspace Chaim$ git clone https://github.com/coreui/coreui-free-vue-admin-template.git CoreUI-Vue

Chaim:workspace Chaim$ cd CoreUI-Vue/

运行出错：

Chaim:CoreUI-Vue Chaim$ npm run serve

> @coreui/coreui-free-vue-admin-template@2.1.3 serve /Users/Chaim/Documents/workspace/CoreUI-Vue
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin                                                    

 ERROR  Failed to compile with 1 errors                                                                         21:58:01

 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: ENOENT: no such file or directory, scandir '/Users/Chaim/Documents/workspace/CoreUI-Vue/node_modules/node-sass/vendor'

解决方法：

Chaim:CoreUI-Vue Chaim$ npm rebuild node-sass

再次运行，成功

Chaim:CoreUI-Vue Chaim$ npm run serve

> @coreui/coreui-free-vue-admin-template@2.1.3 serve /Users/Chaim/Documents/workspace/CoreUI-Vue
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin                                                       

 DONE  Compiled successfully in 6890ms                                                                          22:04:05

 
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.3.29:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

目录结构

CoreUI-Vue/
├── public/              # pure static assets (directly copied)
│   └── index.html           # index.html template
├── src/                 # project root
│   ├── assets/                 # module assets (processed by webpack)
│   │   └── scss/               # user styles
│   ├── components/             # ui components
│   ├── containers/             # ui containers
│   ├── router/                 # routing 
│   ├── shared/                 # utils
│   ├── views/                  # ui views
│   ├── _nav.js                 # sidebar nav config
│   ├── App.vue                 # main app component
│   └── main.js                 # app entry file
├── test/
│   └── unit/            # unit tests
│   └── e2e/             # e2e tests
├── .eslintrc.js         # eslint config
├── .gitignore           # defaults for gitignore
├── .postcssrc.js        # postcss config
├── CHANGELOG.md
├── README.md
├── babel.config.js      # babel config
├── jest.config.js       # jest config
├── vue.config.js        # vue-cli config
├── LICENSE
└── package.json         # build scripts and dependencies

项目裁切

运行CoreUI-Vue后，可以在本地打开“http://localhost:8080/#” 浏览后台效果和所有组件效果，但需要根据项目需求做裁剪。

左边栏

修改"_nav.js"文件，去掉演示项，修改成项目需要的结构。

先改文字和图标：

export default {
  items: [
    {
      title: true,
      name: '平台管理',
      class: '',
      wrapper: {
        element: '',
        attributes: {}
      }
    },
    {
      name: '企业信息',
      url: '/theme/colors',
      icon: 'icon-layers'
    },
    {
      name: '任务管理',
      url: '/theme/typography',
      icon: 'icon-cursor'
    },
    {
      name: '用工管理',
      url: '/theme/typography',
      icon: 'icon-people'
    },
    {
      title: true,
      name: '系统管理',
      class: '',
      wrapper: {
        element: '',
        attributes: {}
      }
    },
    {
      name: '权限管理',
      url: '/base',
      icon: 'icon-wrench',
    },
  ]
}

后期根据需求增加组件后，再改url

上方栏

修改containers/DefaultContainer.vue，不需要乱七八糟的东西，只要一个公司标志和用户头像，如下：

<template>
  <div class="app">
    <AppHeader fixed>
      <SidebarToggler class="d-lg-none" display="md" mobile />
      <b-link class="navbar-brand" to="#">
        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
      </b-link>
      <SidebarToggler class="d-md-down-none" display="lg" />
      <b-navbar-nav class="ml-auto">
        <DefaultHeaderDropdownAccnt/>
      </b-navbar-nav>
    </AppHeader>
    <div class="app-body">
      <AppSidebar fixed>
        <SidebarHeader/>
        <SidebarForm/>
        <SidebarNav :navItems="nav"></SidebarNav>
        <SidebarFooter/>
        <SidebarMinimizer/>
      </AppSidebar>
      <main class="main">
        <Breadcrumb :list="list"/>
        <div class="container-fluid">
          <router-view></router-view>
        </div>
      </main>
      <AppAside fixed>
        <!--aside-->
        <DefaultAside/>
      </AppAside>
    </div>
  </div>
</template>

用户头像

修改containers/DefaultHeaderDropdownAccnt.vue，修改成只需要"Logout"菜单，如下：

<template>
  <AppHeaderDropdown right no-caret>
    <template slot="header">
      <img
        src="img/avatars/6.jpg"
        class="img-avatar"
        alt="admin@bootstrapmaster.com" />
    </template>
    <template slot="dropdown">
      <b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
    </template>
  </AppHeaderDropdown>
</template>

<script>
import { HeaderDropdown as AppHeaderDropdown } from '@coreui/vue'
export default {
  name: 'DefaultHeaderDropdownAccnt',
  components: {
    AppHeaderDropdown
  },
  data: () => {
    return { itemsCount: 42 }
  }
}
</script>

经过裁剪后，基本是需要的框架了，下一步就是增加组件实现各个功能，基本框架如下：

image.png