十、VueJs 填坑日记之在项目中使用Amaze ui

上一篇博文，我们把jQuery集成到了项目中，今天我们来集成Amaze ui（妹子UI）。先来介绍一下妹子UI。Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。最主要是妹子UI的性能好，轻量级。获获取妹子取妹子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，找到以下代码：import “./style/style“;修改为：import “./style/style“;import “./static/amazeui/css/amazeui.css“;import “./static/amazeui/css/admin.css“;不难看出，我们除了之前引用自己写的style.scss以外，又加了两行引用Amaze UI的样式文件。至此，我们就完成了vuejs对amaze ui的整合。使用妹子使用妹子UI（在（在项项目中使用目中使用Amaze UI） ）现在我们对我们的App.vue进行一下调整，用简单的代码来搭建一个小型的后台管理系统。调调整整/src/components/header.vueA7HR 后台管理模板导航切换 收件箱 5管理员 资料设置退出开启全屏export defaultname : “Header“调调整整/src/components/footer.vue© 2014 王二麻子export defaultname : “Footer“调调整整/src/App.vueimport SystemHeader from './components/header.vue'import SystemFooter from './components/footer.vue'export default components: SystemHeader, SystemFooter ,name: 'app'import “./style/style“;import “./static/amaze/css/amazeui.css“;import “./static/amaze/css/admin.css“;运行运行项项目目npm run dev在运行项目的时候，可能会遇到编译错误，如下图：出现这个原因说模块没有正确加载，我们打开/.postcssrc.js这个文件，打到“postcss-import“: ,并删除。最终该文件如下：/ https:/github.com/michael-ciniawsky/postcss-load-configmodule.exports = “plugins“: / to edit target browsers: use “browserslist“ field in package.json“autoprefixer“: 重启服务应该就正确了，如果你和我一样，那应该是这样的。如下：集成工作到目前为止，明天我们来调整列表和内容页面。有任何问题，大家可以在评论区评论留言。