Chapter 12 Vue CLI脚手架组件化开发

欢迎大家订阅【Vue2+Vue3】入门到实践 专栏，开启你的 Vue 学习之旅！

---

前言

组件化开发是Vue.js的核心理念之一，Vue CLI为开发者提供了便捷的工具和结构来实现组件化。通过创建和使用组件，开发者可以构建可复用的代码块，提高开发效率和代码质量。

---

本篇文章参考黑马程序员

一、项目目录结构

使用Vue CLI创建的项目通常具有以下目录结构：

快捷键Ctril+Shift+'打开终端，输入npm run serve 命令并回车，启动开发服务器。

运行结果：

二、组件化开发

1. 组件化

①定义
组件化是将应用程序的功能和界面划分为多个独立的、可重用的部分（组件），每个组件负责特定的任务或功能，有着自己独立的结构、样式、行为。

②好处
组件化使得开发过程更加模块化，便于管理、维护以及复用，大大提升了开发效率。

③组件分类

• 普通组件：可以在其他组件中使用的可复用的 UI 组件，通常用于封装特定的功能或 UI 结构。
• 根组件：整个 Vue 应用的入口点。每个 Vue 应用只能有一个根组件，它通常负责渲染整个应用的结构，包含其他普通组件，并管理应用的状态和路由。

2. Vue 组件的基本结构

在Vue中，组件是一个独立的、可复用的代码块，通常由以下几个部分组成：
①模板（Template）：定义组件的HTML结构。
②脚本（Script）：定义组件的逻辑和数据。
③样式（Style）：定义组件的样式。

【示例】

3. 依赖包less & less-loader

在 Vue.js 项目中，less 和 less-loader 是用于处理 LESS（Leaner Style Sheets）样式表的依赖包。

①less
LESS 是一种 CSS 预处理器，允许开发者使用变量、嵌套规则、混合、函数等功能来编写更具结构化和可维护性的 CSS 代码，具有以下主要特性：

• 变量：可以定义变量以存储颜色、字体、尺寸等值，便于重用和维护。
• 嵌套：支持嵌套规则，使得样式结构更清晰。
• 混合：可以定义可重用的样式块，类似于函数。
• 运算：支持数学运算，可以在样式中进行计算。

②less-loader
less-loader 是一个 Webpack 加载器，用于将 LESS 文件转换为 CSS 文件。它会在构建过程中处理 LESS 文件，并将其编译为标准的 CSS，以便浏览器能够理解。

③安装
在终端输以下任一命令并回车，安装依赖包 less 和 less-loader。

• yarn命令：yarn add less less-loader -D
• npm命令：npm install less less-loader --save-dev