Admin后台比较

CoreUI Vue Admin

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

Stars 1,800个，共提交178次，最新提交2019年4月4日

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

熟悉的Vue目录结构，改起来放心了。

Vue-Element-Admin

https://vuejsadmin.com/product/vue-element-admin/

Stars 5个，共提交670次，最新提交2018年9月19日

上一个项目用过，实现功能不多，没觉得有什么问题。

UI控件比较

Element-UI

https://github.com/ElemeFE/element

Stars 37,851个，共4126个提交，最新提交日期为2019年5月23日

CoreUI-VUE

https://github.com/coreui/coreui-vue

Stars 53个，共65个提交，最新提交日期为2019年1月17日

CoreUI

https://github.com/coreui/coreui

Stars 113

Admin后台控件

简单找两个控件看看怎么使用。

Button

element-ui

<el-button type="primary">主要按钮</el-button>

<el-button type="primary" round>主要按钮</el-button>

<el-button type="primary" icon="el-icon-edit"></el-button>

<el-button type="primary" disabled>主要按钮</el-button>

coreui-vue

<b-button size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>

Card

element-ui

<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表内容 ' + o }}
  </div>
</el-card>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>

coreui-vue

<b-card>
  <div slot="header">
    Card with label
    <b-badge pill variant="danger" class="float-right">42</b-badge>
  </div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</b-card>