Vue系列【在项目中使用CoreUI-Vue】

本文仅用来个人记录备忘

安装

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/[email protected] 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/[email protected] 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，不需要乱七八糟的东西，只要一个公司标志和用户头像，如下：

用户头像

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

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

image.png