65. Complete the development of qunar.com App home page of Vue project (source: muke.com)

2020 / 10 / 21, Wednesday, today is another day of struggle.

@Author: Runsen
@Date: 2020/10/21

Write in front: I am "Runsen". I love technology, open source and programming. Technology is open source and knowledge is shared. Turning the big four algorithm to the front end requires the accumulation of every day and refueling every day!!!

Today, we will complete the development of qunar.com App home page of Vue project. The following is the summary and feelings of completing the development of qunar.com App home page of Vue project on muke.com.

Global installation of stylus and stylus loader

There are three kinds of CSS preprocessing in Vue, and now the most used is stylus.

Download and install the stylus and stylus loader packages.

npm install stylus@0.54.5  --save
npm install stylus-loader@3.0.1 --save

In package In JSON, you can the version number corresponding to stylus and stylus loader.

When writing styles in vscode, you'd better install the plug-in of styles

Create iconfont project

In Alibaba icon official, create iconfont project and add required icons. Download to local.

Copy the corresponding file to the corresponding project and modify iconfont The path corresponding to the CSS file.

Home.vue

At home Vue refers to HomeHeader, which corresponds to < home header >

<template>
  <div>
    <home-header></home-header>
  </div>
</template>

<script>
// Local components need to be inserted into components. Since the keys and values are the same, they are written as HomeHeader
import HomeHeader from './components/Header'
export default {
  name: 'Home',
  components: {
    HomeHeader
  }
}
</script>

<style>
</style>

Header.vue

Header.vue is a component developed on the home page, which refers to the corresponding icon.

In styles, 1rem is equal to 100px. PX pixel. Unit of relative length. Pixel PX is relative to the screen resolution of the display.

For various mobile devices that need to be adapted, rem is used. Therefore, rem is basically used for front-end development.

<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe602;</span>
      Enter city/scenic spot/Play theme
    </div>
    <div class="header-right">city
      <span class="iconfont arrow-icon">&#xe658;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.header
  display: flex
  line-height: 0.86rem
  height: 0.86rem
  background: $bgColor
  color: #fff
  .header-left
    width: 0.64rem
    float: left
    .back-icon
      text-align: center
      font-style: 0.4rem
  .header-input
    flex: 1
    background: #fff
    height: 0.64rem
    line-height: 0.64rem
    margin-top: 0.12rem
    margin-left: 0.2rem
    boirder-radius: 0.1rem
    color: #ccc
  .header-right
    width: 1.24rem
    float: right
    text-align: center
    .arrow-icon
      margin-left: -0.04rem
      font-size: 0.24rem
</style>

Configure webpack and maintain the project

On webpack base. Configure 'styles' in conf.js: Resolve ('src/assets/styles'),. As long as styles appears in import, it means src/assets/styles path


The specific effects are as follows.


Reference courses: Muke.com vue2.com 5 - > 2.6 - > 3.0 development qunar App from zero foundation introduction to actual project development

Please press one button three times!!!!!

Tags: less Vue

Posted by NeoGeo on Tue, 10 May 2022 12:52:42 +0300