十、VueJs 填坑日记之在项目中使用Amaze UI
来源:互联网 发布:淘宝闲鱼官方下载 编辑:程序博客网 时间:2024/06/05 10:17
获取妹子UI(Amaze UI)
下载地址:http://amazeui.org/getting-started
点击上方绿色的按钮,我们来下载最新版的妹子UI,下面有配套的文档和编辑器,我们只是把妹子UI集成到vuejs项目中,所以我们只需要妹子UI就可以了。
整理妹子UI文件(Amaze UI)
将下载下来的AmazeUI-2.7.2.zip,我们解压到一个目录中,如下图
将assets内的所有文件夹及文件,复制到我们项目中的/static/amaze/目录下,如图
配置妹子UI(Amaze UI和vuejs的整合)
打开/src/App.vue,找到以下代码:
1
2
3
<style lang=
"scss"
>
@
import
"./style/style"
;
</style>
修改为:
1
2
3
4
5
<style lang=
"scss"
>
@
import
"./style/style"
;
@
import
"../static/amaze/css/amazeui.css"
;
@
import
"../static/amaze/css/admin.css"
;
</style>
不难看出,我们除了之前引用自己写的style.scss以外,又加了两行引用Amaze UI的样式文件。至此,我们就完成了vuejs对amaze ui的整合。
使用妹子UI(在项目中使用Amaze UI)
现在我们对我们的App.vue进行一下调整,用简单的代码来搭建一个小型的后台管理系统。
调整/src/components/header.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<
template
>
<
header
class="am-topbar am-topbar-inverse admin-header">
<
div
class="am-topbar-brand">
<
strong
>A7HR</
strong
> <
small
>后台管理模板</
small
>
</
div
>
<
button
class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><
span
class="am-sr-only">导航切换</
span
> <
span
class="am-icon-bars"></
span
></
button
>
<
div
class="am-collapse am-topbar-collapse" id="topbar-collapse">
<
ul
class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
<
li
><
a
href="javascript:;"><
span
class="am-icon-envelope-o"></
span
> 收件箱 <
span
class="am-badge am-badge-warning">5</
span
></
a
></
li
>
<
li
class="am-dropdown" data-am-dropdown>
<
a
class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
<
span
class="am-icon-users"></
span
> 管理员 <
span
class="am-icon-caret-down"></
span
>
</
a
>
<
ul
class="am-dropdown-content">
<
li
><
a
href="#"><
span
class="am-icon-user"></
span
> 资料</
a
></
li
>
<
li
><
a
href="#"><
span
class="am-icon-cog"></
span
> 设置</
a
></
li
>
<
li
><
a
href="#"><
span
class="am-icon-power-off"></
span
> 退出</
a
></
li
>
</
ul
>
</
li
>
<
li
class="am-hide-sm-only"><
a
href="javascript:;" id="admin-fullscreen"><
span
class="am-icon-arrows-alt"></
span
> <
span
class="admin-fullText">开启全屏</
span
></
a
></
li
>
</
ul
>
</
div
>
</
header
>
</
template
>
<
script
>
export default{
name : "Header"
}
</
script
>
调整/src/components/footer.vue
1
2
3
4
5
6
7
8
9
10
<
template
>
<
footer
>
<
p
class="am-padding-left">© 2014 王二麻子</
p
>
</
footer
>
</
template
>
<
script
>
export default{
name : "Footer"
}
</
script
>
调整/src/App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<
template
>
<
div
>
<
SystemHeader
></
SystemHeader
>
<
div
class="am-cf admin-main">
<
router-view
></
router-view
>
</
div
>
<
SystemFooter
></
SystemFooter
>
</
div
>
</
template
>
<
script
>
import SystemHeader from './components/header.vue'
import SystemFooter from './components/footer.vue'
export default {
components: { SystemHeader, SystemFooter },
name: 'app'
}
</
script
>
<
style
lang="scss">
@import "./style/style";
@import "../static/amaze/css/amazeui.css";
@import "../static/amaze/css/admin.css";
</
style
>
运行项目npm run dev
在运行项目的时候,可能会遇到编译错误,如下图:
出现这个原因说模块没有正确加载,我们打开/.postcssrc.js这个文件,打到"postcss-import": {},并删除。
最终该文件如下:
1
2
3
4
5
6
7
8
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
重启服务应该就正确了,如果你和我一样,那应该是这样的。如下:
集成工作到目前为止,明天我们来调整列表和内容页面。有任何问题,大家可以在评论区评论留言。
阅读全文
0 0
- 十、VueJs 填坑日记之在项目中使用Amaze UI
- 一、VueJs 填坑日记之基础概念知识解释
- amaze ui 的使用
- 第一次使用框架-amaze UI
- 如何制作Vuejs组件,并且在项目中使用
- Amaze UI
- Nuxt.js中使用Element-UI填坑
- 在项目中使用AngularJS+UI-Grid
- springboot填坑日记
- Tensorflow 填坑日记
- amaze ui包中缺少jquery文件解决办法
- amaze ui html5前端开源框架使用
- spring boot:使用Thymeleaf+Amaze UI出现的未知BUG
- Laravel 5.4中使用Vuejs的坑
- Amaze UI flash
- Amaze UI CDN
- Amaze UI框架搭建
- Amaze UI定制
- DOM对象和js对象以及jQuery对象的区别
- 经典SQL语句
- 第1章 简介
- 2、最大子序列和问题的四个算法
- 用notepad++打造自己的IDE开发环境
- 十、VueJs 填坑日记之在项目中使用Amaze UI
- linux下zookeeper的安装配置
- Android adb.exe程序无法启动的方法
- udev和mdev学习总结
- 直播技术简单介绍之直播协议
- flask模板
- [LeetCode]20_Valid Parentheses
- Scala-模式匹配
- 利用docker搭建spark hadoop workbench