Table of contents
1_Vue component development ideas
How people deal with complex problems:
- The logical ability of any one person to process information is limited
- Therefore, when faced with a very complex problem, it is impossible to get a lot of content at once.
- However, people have an innate ability to disassemble problems.
- If you divide a complex problem into many small problems that can be handled, and then put them into a whole, you will find that the big problem will be solved easily.
1.1_ Understanding component development
Componentization is also a similar idea:
- If all the processing logic in a page is put together, the processing will become very complicated, and it is not
conducive to subsequent management and expansion; - However, if a page is divided into small functional blocks, and each functional block completes its own independent
functions, then the management and maintenance of the entire page becomes very easy; - If you split each function block, you can build a project like building blocks;
No matter from the three major frameworks (Vue, React, Angular), or the cross-platform solution Flutter, even the mobile terminal is turning to component development, including the development of small programs, which also adopt the idea of component development.
Therefore, the most important thing to learn componentization is its idea. Each framework or platform may implement it differently, but the idea is the same.
It is necessary to think about the entire application through the idea of componentization:
- Divide a complete page into many components;
- Each component is used to implement a functional block of the page;
- And each component can be subdivided;
- The components themselves can be reused in multiple places;
1.2 Componentization of Vue
Componentization is the core idea of Vue, React, Angular
- The previous createApp function passed in an object App, which is actually a component and the root component of the application;
- Componentization provides an abstraction that allows the development of applications constructed from independent and reusable small components;
- Any application will be abstracted into a component tree;
1.3_ Ways to register components
If there is a part of the content (template, logic, etc.), and you want to extract this part of the content into an independent component for maintenance, how to register a component at this time?
There are two types of registration components:
- Global component: a component that can be used in any other component;
- Partial components: components that can only be used in registered components;
2_Vue's global components
Global components need to use the globally created app to register components;
componentA global component can be registered by passing in the component name and component object through the method ;- After that, you can use this global component directly in the template of the App component
<body>
<div id="app">
<!-- 1.内容一: -->
<product-item></product-item>
<!-- 2.内容二: -->
<product-item></product-item>
<!-- 3.内容三: -->
<product-item></product-item>
</div>
<!-- 组件product-item的模板 -->
<template id="item">
<div class="product">
<h2>我是商品</h2>
<div>商品图片</div>
<div>商品价格: <span>¥9.9</span></div>
<p>商品描述信息, 9.9秒杀</p>
</div>
</template>
<script src="../lib/vue.js"></script>
<script>
/*
1.通过app.component(组件名称, 组件的对象)
2.在App组件的模板中, 可以直接使用product-item的组件
*/
// 1.组件: App组件(根组件)
const App = {
}
// 2.创建app
const app = Vue.createApp(App)
// 3.注册一个全局组件
// product-item全局组件
app.component("product-item", {
template: "#item"
})
// 2.挂载app
app.mount("#app")
</script>
</body>
The logic of the global component
The component itself can also have its own code logic, such as its own data, computed, methods, etc.
component name
When registering a component through app.component, the first parameter is the name of the component. There are two ways to define the component name:
-
Method 1: Use kebab-case (dash separator).
- When defining a component using kebab-case (dash-separated names), you must also use kebab-case when referencing the custom element, for example
<my-component-name>
- When defining a component using kebab-case (dash-separated names), you must also use kebab-case when referencing the custom element, for example
-
Method 2: Use PascalCase (camel case identifier)
-
When defining a component using PascalCase (capitalized names), you can use both nomenclatures when referring to the custom element.
-
For example
<my-component-name>and<MyComponentName>are acceptable;
-
3_Vue's local components
Global components are often completed with global components at the beginning of the application, which means that if some components are not used, they will also be registered together:
- For example, three global components are registered: ComponentA, ComponentB, and ComponentC;
- Only ComponentA and ComponentB are used in development. If ComponentC is not used but is still registered globally, it means that a packaging tool like webpack will still package it when packaging the project;
- In this way, the final packaged JavaScript package will have the content of ComponentC, and the size of the package will also increase when the user downloads the corresponding JavaScript;
Therefore, when using components in development, local registration is usually used:
- Partial registration is registered through the components attribute option in the components that need to be used;
- For example, in the previous App component, there are options such as data, computed, methods, etc. In fact, there can also be a components option;
- The components option corresponds to an object, and the key-value pair in the object is the name of the component: component object;
<body>
<div id="app">
<home-nav></home-nav>
<product-item></product-item>
<product-item></product-item>
<product-item></product-item>
</div>
<template id="product">
<div class="product">
<h2>{
{title}}</h2>
<p>商品描述, 限时折扣, 赶紧抢购</p>
<p>价格: {
{price}}</p>
<button>收藏</button>
</div>
</template>
<template id="nav">
<div>-------------------- nav start ---------------</div>
<h1>我是home-nav的组件</h1>
<product-item></product-item>
<div>-------------------- nav end ---------------</div>
</template>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const ProductItem = {
template: "#product",
data() {
return {
title: "我是product的title",
price: 9.9
}
}
}
// 1.1.组件打算在哪里被使用
const app = Vue.createApp({
//局部组件注册
components: {
ProductItem,
HomeNav: {
template: "#nav",
components: {
ProductItem
}
}
},
// data: option api
data() {
return {
message: "Hello Vue"
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>
4_Vue development mode and analysis
4.1_Vue development mode
The previous process of using vue was in the html file, and the template, script logic, style, etc. were written through the template.
But as the project becomes more and more complex, it will be developed in a componentized way:
- This means that each component will have its own template, script logic, styles, etc.;
- Of course, they can still be extracted into separate js and css files, but they will still be separated;
- The script also included is in a global scope, which is prone to naming conflicts;
- And the code must use ES5 syntax in order to adapt to some browsers;
- After the code is written, it is still necessary to build and code the code through tools;
So in real development, it can .vuebe solved by a Single-File Components with a suffix of , and it can
be processed by using webpack, vite or rollup and other construction tools.
4.2_Characteristics of a single file
Single-fFle Components (single-file components)
There are a lot of features available in this component:
- code highlighting;
- The modularization capabilities of ES6 and CommonJS;
- Component-scoped CSS;
- Preprocessors can be used to build richer components, such as TypeScript, Babel, Less, Sass, etc.;
4.3_How to support SFC
.vueThere are two common ways to use SFC files:
-
Method 1: Use Vue CLI to create a project. The project will help configure all configuration options by default, and you can directly use the .vue file in it;
-
Method 2: Use a packaging tool such as webpack, rollup or vite to package it;
In the end, whether it is to do projects in the later stage or develop in the company, it is usually done in the way of Vue CLI
4.4_VSCode support for SFC files
In most cases of real development, SFC (single-file components (single-file components)) is used.
VSCode support for SFC:
- Plug-in 1:
VeturVSCode, which has been in use since Vue2 development, supports Vue plug-ins; - Plug-in 2:
Volar, the officially recommended plug-in;
5_Vue CLI installation and use
5.1_Vue CLI Scaffolding
I learned how to configure Vue's development environment through webpack, but in real development, it is impossible to complete all
webpack configurations for each project from scratch, which shows that the efficiency of development will be greatly reduced;
- In real development, scaffolding is usually used to create a project, and Vue's project uses Vue's scaffolding;
- Scaffolding is actually a concept in construction engineering. In software engineering, some tools that help build projects are also called scaffolding;
Vue's scaffolding isVue CLI
-
CLI is Command-Line Interface, translated as Command Line Interface;
-
The configuration of the project and the created project can be selected through the CLI;
-
Vue CLI has built-in webpack-related configurations, no need to configure from scratch;
5.2_Vue CLI installation and use
Find a terminal. cmd or git bash are fine.
Install Vue CLI (currently the latest version is v5.0.8), generally installed globally, so that projects can be created at any time through vue commands;
npm install @vue/cli -g
Upgrade Vue CLI. If it is an older version, you can upgrade it with the following command
npm update @vue/cli -g
After installation, you can npm -versioncheck the npm version number, which also reflects from the side whether the scaffolding is installed successfully.
Create projects through Vue commands
The name of the Vue create project
5.3_vue create project process
Example in the figure below.
Use the up and down arrow keys to jump to the corresponding option, and click the space bar to select an option. After confirming the option, click the Enter key to confirm and enter the next link.
5.4_ directory structure of the project
5.5 Operation principle of Vue CLI
6_How to create a Vue project – Vite
Refer to the official website:
Home | Vite Chinese Website (vitejs.cn)
Vue.js - Progressive JavaScript framework | Vue.js (vuejs.org)
Enter the command in the terminal:
npm int vite@latest
Reference article: [Use Vite to quickly create a vue3 project (super simple, super fast)_vite builds vue3_Mr. Yinzi's blog-CSDN blog]