Three, html page construction Vue project steps ideas

In the construction of the page, the artist usually makes the effect picture first, and then cuts the picture into html. After we get the html, we first analyze the structure so that it can be split into components. A very distinctive feature of the vue project is component development. Finally, realize Corresponding business logic, such as obtaining data through the interface, etc.

Based on the analysis of the home page of the website, it is generally divided into the head, the middle content part, and the tail. According to this structure, create a new folder to store the corresponding content to create a storage component.

When developing components, you need to pay attention to the following:

1. The style in the component and the image path must be correct

2. The vue project uses the less style. The static html is all css style. The browser recognizes the css style and does not recognize the less style, so you need to install the less and less-loader dependency packages, and in the . vuefile, stylethe node Add lang="less"attributes to it , you can use less directly, and the browser can recognize it

Install less and less-loader. If you don’t add the version number, the latest version will be installed by default. Sometimes the version is too high and an error will be reported. Generally, the version will be specified during installation. Version 5 is used here

命令：npm install --save less less-loader@5

Component steps in vue:

(1) Create components

(2) Introduce component styles and develop components

(3) Implement the corresponding business logic in the component, for example, call the interface to obtain data, etc.

(4) Use component steps:

                【1】Introduce components through import,

                For example, import components/Header in the current directory     

                【2】Register components, register components through components (only after registration, the components can be used)

                【3】Using components

Example:

<template>
  <div id="app">
    <!-- 3、使用组件header -->
    <Header></Header>
    </div>
</template>

<script>
//1、引入vue 引入当前目录下components/Header  
import Header from "./components/Header";
export default {
  name: "App",
  components: {
    //2、注册组件
    Header,
  },
};
</script>