Vue系列【组件库选择】

本文仅用做记录备忘

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/[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

熟悉的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

主要按钮

主要按钮



主要按钮

coreui-vue

Facebook

Card

element-ui

  

    卡片名称
    操作按钮
  
  

    {{'列表内容 ' + o }}
  

coreui-vue

  

    Card with label
    42
  
  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.

结论

计划本项目admin后台使用CoreUI-Vue，前端使用Element-ui。

参考

https://blog.csdn.net/itKingOne/article/details/78039447

https://element.eleme.cn

https://www.npmjs.com/package/element-ui