Decoupage Web Projects before and after Building from Scratch: Front-end Perfection – A step-by-step guide to building a website layout quickly

We introduce the header layout in the main APP entrance, app. vue is the body element of the adjacent element, and all pages and subroutes of this program are subsets of the app. vue entrance, indicating that the global introduction layout will have the following problems:

1. All projects in this project will definitely carry the content rendered by the Header component. 2.

Of course, you could write logical conditions on the Header component to filter the specified routes, but this would break the legibility of the project and make it difficult to maintain

I personally recommend the first approach: on-demand introduction.

Continue to the layout

• Follow suit and write Footer

vim new-bee/src/renderer/components/layout/Footer.vue
Copy the code

<template>
    <footer class="footer footer-light-medium " style="padding-bottom: 20px; padding-top: 20px;">
    <div class="container">
        <div class="columns"> <! -- Column --> <div class="column is-4">
                <div class="mb-20">
                    < img class="small-footer-logo" src="https://img.actd.tw/images/2018/11/17/bee.png" alt="">
                    <div class="footer-description pt-10"> < p style = "max-width: 100%; clear: both; min-height: 1em; </div> </div> <div> <span class="moto"> Like items can be liked in support of <a href="https://github.com/pkwenda/new-bee" target="_blank">
                            <span class="icon"><i class="fa fa-github"></i></span>
                        </a >.</span>
                    <div class="social-links mt-20"> </div> </div> </div> <! -- Column --> <div class="column is-6 is-offset-2">
                <div class="columns"> <! -- Column --> <div class="column">
                        <ul class="footer-column">
                            <li class="column-header">
                                Links
                            </li>
                            <li class="column-item"><a href="https://github.com/pkwenda/new-bee">Home</a ></li>
                            <li class="column-item"><a href="https://cssninja.io/themes">Blog</a ></li>
                            <li class="column-item"><a href="https://github.com/pkwenda/new-bee/wiki">Wiki</a ></li> </ul> </div> <! -- Column --> <div class="column">
                        <ul class="footer-column">
                            <li class="column-header">
                                Ressources
                            </li>
                            <li class="column-item"><a href="https://cssninja.io/help">Help center</a ></li>
                            <li class="column-item"><a href="https://cssninja.io/blog">Blog</a ></li>
                            <li class="column-item"><a href="https://cssninja.io/help/rules">Rules</a ></li> </ul> </div> <! -- Column --> <div class="column">
                        <ul class="footer-column">
                            <li class="column-header">
                                Terms
                            </li>
                            <li class="column-item"><a href="https://cssninja.io/help/terms/licenses/personal">Personal</a ></li>
                            <li class="column-item"><a href="https://cssninja.io/help/terms/licenses/developer">Developer</a ></li>
                            <li class="column-item"><a href="https://cssninja.io/help/terms/service">Terms of Service</a ></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</template>


<script>
export default {
  name: "Footer".data() {
    return {};
  },
  created() {},
  destroyed() {},
  mounted() {

  },
  methods: {}
};
</script>

Copy the code

Don’t forget to introduce it in HelloWorld

• See the effect

• It looks like it’s working pretty well, and then the Content

vim new-bee/src/renderer/components/layout/Content.vue
Copy the code

<template>

      <div class="container" style="height:700px"> <h1 > List of blogs </h1> <article class="column is-3"   v-for="blog in blogs" v-bind:key="blog"> 
            <a   class="bd-article-image is-bootstrap" >
            <span class="bd-article-overlay"></span>
            <span class="bd-article-icon">
                <i class="fa fa-tag"></i>
            </span>
            <strong class="bd-star-icon" ><i class="fa fa-star"></i> <span style="font-size: 1rem">&nbsp; {{blog.commendCount}}</span></strong> <strong class="bd-article-info">
                <span>
                <time class="bd-article-date" datetime="2017-10-09T00:00:00+00:00">
                    {{blog.tag}}
                </time>
                <strong class="bd-article-title">
                    {{blog.title}}
                </strong>
                </span>
            </strong>
            </a>
        </article>
      </div>
</template>


<script>
let article = { tag: "java", title: "java", commendCount: 0 };
export default {
  name: "Footer".data() {
    return {
      blogs: [
        article,
        article,
        article,
        article,
        article,
        article,
        article,
        article
      ]
    };
  },
  created() {},
  destroyed() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.bd-article-image.is-bootstrap {
  background-color: #6f5499;
}
.bd-article-image {
  background-color: #00d1b2;display: block; height: 240px; margin-left: auto; margin-right: auto; position: relative; text-align: center; }. Bd-star-icon {font-size: 19.2px; The font - size: 1.2 rem; color:#0a0a0a;Opacity: 0.25; bottom: 10px; left: 30px; position: absolute; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .bd-article-icon, .bd-article-info { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bd-article-info { padding: 20px; } a strong { color: currentColor; }. Bd-article date {color: rgba(0, 0, 0, 0.5); display: block; } .bd-article-title { color: white; display: block; The font - size: 1.8 rem; font-weight: 700; The line - height: 1.25; padding: 0 20px; } .bd-article-icon { color:#0a0a0a;Opacity: 0.25; } h1 { text-align: center; font-size: 30px; } .column.is-3, .column.is-3-tablet { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 25%;float: left;
}
</style>


Copy the code

• See the effect

  

• The helloWorld.vue code looks like this

Ok, so let’s go on to figure 2

Specify the AD(advertising) component for Content.

vim new-bee/src/renderer/components/common/AD.vue
Copy the code

<template>
     
             <div class="ad"><h1>Macao XX casino is online</h1></div>
    
</template>

<script>
export default {
  name: "AD",

  data() {
    return {};
  },
  destroyed() {},
  mounted() {},
  methods: {},
  watch: {}};</script>
 <style   scoped>
.ad {
  width: 150px;
  height: 180px;
  background-color: #ececec;
  position: fixed;
  right: 30px;
  top: 80px;
}
</style>
 
Copy the code

• Don’t forget to introduce it in Content.vue

.<AD></AD>. import AD from "@/components/common/AD"; export default { name: "Content", components: { AD }, ... }Copy the code

• Look at the effect

• Compare the sketches we did with Sketch

We’re almost done with our initial concept

conclusion

At this point the page layout and component reference about the end of the story, I believe you can draw inferiorism, write their own small site, which is more complex nesting way is not about, we go directly to see the project.

The author’s words

Actually this project’ve been like this today, just after all the writing tutorials, delay the progress, write the tutorial is not copy and paste, must first guarantee the accuracy, rather than delete censored to hurry, want to write a good tutorial only empathy, as a small white, from the CLI, head to tail one line of code one line of code that pile up. It is no longer the era of jquery.js and vue.js to write scripts (Angular already has IOC). As a back end, the front end is basically here. After Electron, let’s go straight to the project. There’s nothing to talk about. The next chapter will be a separate one. This tutorial is full stack direction, the next step is the backend microservice, message queue, Docker, docker-compose/rancher simulation cluster, operation and maintenance, etc. I will speed up the progress in the future, try to write the whole content before the New Year.

About the reply

New post two days before I go to Denver actually everybody’s comments I can see, but you can imagine, the nuggets news remind no classification: thumb up | |

I can go to github issues each article below leave a message to ask questions, or erratum, paving the way for future generations, the new article will be sent here first one day please erratum, star does not star doesn’t matter, thank you.

The project address

This chapter source address

This article addresses

The articles

Sequencing – Meaning of open source

Introduction – A look at the history of the WEB

Explore – Talk in depth about the pre – and post-separation architecture

Ready? – Did you clear the front end? Front-end infrastructure and technology introduction

Real – 5 minutes to quickly build a standard front end project skeleton

Practice – Continue to polish the front-end architecture in order to get ahead of the game

Perfect – Hand by hand to teach you how to quickly build a website layout

The next chapter is “The End of the Front-end – Front-end Performance Optimization and Rollout”.