本文仅用做记录备忘
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>
结论
计划本项目admin后台使用CoreUI-Vue，前端使用Element-ui。
