[Vue2+3 Getting Started to Practical Practice] (8) Vue Basics Engineering Development and Scaffolding Vue CLI Componentized Component Registration Detailed Example

day03

1. Today’s goal

1. Introduction to engineering development

1. Engineering development and scaffolding
2. Project operation process
3. Componentization
4. Component registration

2. Comprehensive cases

1. Split module-partial registration
2. Perfect structural style
3. Split components – global registration

2. Engineering development and scaffolding

1. Two ways to develop Vue

• Traditional development model of core package: Based on html/css/js files, directly introduce the core package to develop Vue.
• Engineering development model: Develop Vue in an environment based on build tools (for example: webpack).

Advantages of engineering development model:

Improve coding efficiency, such as using JS new syntax, Less/Sass, Typescript, etc., which can be compiled into ES3/ES5/CSS recognized by browsers through webpack.

Engineering development model issues:

• Webpack configuration is not simple
• Same basic configuration
• lack of unified standards

In order to solve the above problems, we need a tool to generate standardized configurations

2. Scaffolding Vue CLI

basic introduction:

Vue CLI is a global command tool officially provided by Vue

It can help us quickly create a standardized basic framework for developing Vue projects . [Integrated webpack configuration]

benefit:

1. Ready out of the box, zero configuration
2. Built-in babel and other tools
3. Standardized webpack configuration

Steps for usage:

1. Install globally (you only need to install it once) yarn global add @vue/cli or npm i @vue/cli -g
2. Check the vue/cli version: vue --version
3. Create a project shelf: vue create project-name (the project name cannot be in Chinese)
4. Start the project: yarn serve or npm run serve (the command is not fixed, look for package.json)

3. Project directory introduction and operation process

1. Introduction to project directory

Although there are many files in the scaffolding, currently we only need three files for personnel

1. main.js entry file
2. App.vue App root component
3. index.html template file

2. Run the process

4. Component development

​ Componentization: A page can be split into components, each component has its own independent structure, style, and behavior.

​ Benefits: Easy to maintain and reuse → Improve development efficiency.

​ Component classification: ordinary components, root components.

For example: For the page below, all the code can be written on one page, but this makes the code confusing and difficult to maintain. We can divide components according to modules

Summarize:

What are the benefits of componentization?

Classification of components?

5. Root component App.vue

1. Introduction to root components

The top-level component of the entire application, wrapping all ordinary widgets

2. The component is composed of three parts

• Syntax highlighting plugin

• Three parts

  • template: structure (has and can only have one root element)
  • script: js logic
  • style: style (can support less, needs to be packaged)

• Let the component support less

  (1) style tag, lang="less" turns on the less function

  (2) Package: yarn add less less-loader -D or npm i less less-loader -D

3. Summary

What are the three parts of the App component?

6. Registration and use of common components - partial registration

1. Features:

Can only be used within registered components

2. Steps:

1. Create .vue file (three components)
2. First import and then register in the component used, and finally use

3. How to use:

Just use it as an html tag <component name></component name>

4. Note:

Component name specification -> big camel case naming method, such as HmHeader

5. Grammar:

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default {
    
      // 局部注册
  components: {
    
    
   '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

6. Practice

In the App component, complete the following exercises. Complete the following layout using components in App.vue

<template>
  <div class="hm-header">
    我是hm-header
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #8064a2;
  color: white;
}
</style>

<template>
  <div class="hm-main">
    我是hm-main
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-main {
  height: 400px;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  background-color: #f79646;
  color: white;
  margin: 20px 0;
}
</style>

<template>
  <div class="hm-footer">
    我是hm-footer
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-footer {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #4f81bd;
  color: white;
}
</style>

7. Summary

• Can local components registered inside component A be used in component B?
• What are the steps to register a component locally?
• What naming convention should be followed when using components?

7. Registration and use of common components - global registration

1. Features:

Globally registered components can be used in any component of the project

2. Steps

1. Create .vue component (three components)
2. Global registration in main.js

3. How to use

Use it directly as an HTML tag

<component name></component name>

4.Attention

Component name specification -> big camel case naming method, such as HmHeader

5. Grammar

Vue.component('component name', component object)

example:

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

6. Practice

In the following three partial components, a common button is displayed

<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {

}
</script>

<style>
.hm-button {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #3bae56;
  border-radius: 5px;
  color: white;
  border: none;
  vertical-align: middle;
  cursor: pointer;
}
</style>

7. Summary

1. In which file should the global registration component be registered and what is the syntax?

2. Can global components be used in any component in the project?

8. Comprehensive cases

1. Xiaotuxian homepage startup project demonstration

2. Schematic diagram of the component disassembly of Little Rabbit Fairy

3.Develop ideas

1. Analyze the page, split components by modules, and build frameworks (local or global registration)

2. According to the design drawing, write the component html structure css style (ready)

3. Split and encapsulate common widgets (local or global registration)

   In the future → realize functions through dynamic rendering through js