本文仅用来个人记录备忘
安装
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"菜单,如下:
Logout
经过裁剪后,基本是需要的框架了,下一步就是增加组件实现各个功能,基本框架如下:
image.png