X. VUEJS pits Diary Use the Amaze UI in the project

In the previous blog post, we integrated jquery into the project, and today we integrate the Amaze UI (sister UI). Let me introduce my sister's UI. The Amaze UI contains nearly 20 CSS components, 20 + JS components, and a number of WEB components with different themes to quickly build a great interface and experience excellent cross-screen pages, greatly improving development efficiency. The most important thing is that the performance of the UI is good and lightweight.

Get sister UI (Amaze UI)
: http://amazeui.org/getting-started

Click the green button above, we will download the latest version of the sister UI, the following are the supporting documents and editors, we just integrate the sister UI into the Vuejs project, so we just need to sister UI.

Organize your sister UI files (Amaze UI)
Will download down the Amazeui-2.7.2.zip, we extract into a directory, such as

Copy all the folders and files within the assets to the/static/amaze/directory in our project,

Configure the sister UI (Amaze UI and Vuejs integration)
Open/src/app.vue and locate the following code:

<style lang= "Scss" >    @import "./style/style";</style>

Modified to:

<style lang= "Scss" >    @import "./style/style";    @import ". /static/amaze/css/amazeui.css ";    @import ". /static/amaze/css/admin.css ";</style>

It is not difficult to see that we have added two more lines of style files referencing the Amaze UI in addition to the style.scss we wrote earlier. At this point, we have completed the integration of Vuejs to the Amaze UI.

Using the sister UI (using the Amaze UI in your project)
Now let's tweak our App.vue and build a small backend management system with simple code.
Adjust/src/components/header.vue

<template>
Adjust/src/components/footer.vue
<template><footer>  <p class= "am-padding-left" >©2014 Wang er flaxseed </p></footer></ Template><script>export default{name: "Footer"}</script>
Adjust/src/app.vue
<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>
Run the project NPM run Dev
When you run the project, you may encounter compilation errors, such as:
For this reason the module does not load properly, we open/.postcssrc.js this file, hit "Postcss-import": {}, and delete.
Finally, the file looks like this:
Https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = {  "plugins": {    //To edit target Browsers:use "browserslist" field in Package.json    "Autoprefixer": {}}  }
Restart the service should be correct, if you and I, that should be the case. As follows:

Integration work so far, tomorrow we'll adjust the list and content pages. If you have any questions, you can comment in the comments section.
X. VUEJS pits Diary Use the Amaze UI in the project