Vue组件化开发

Vue组件化开发

1. NPM使用

1.1 NPM简介

• NPM (Node Package Manager）是一个NodeJS包管理和分发工具。
• NPM以其优秀的依赖管理机制和庞大的用户群体，目前已经发展成为整个 JS领域的依赖管理工具
• NPM最常见的用法就是用于安装和更新依赖。要使用NPM，首先要安装Node工具。
  心

1.2 Node.JS下载安装

• Node.js是一个基于Chrome V8引擎的JavaScript运行时环境。
• Node中包含了NPM包管理工具。
• 下载地址: https://nodejs.org/zh-cn/

Node的下载安装，npm镜像的配置（把镜像改为国内镜像，这样下载包的速度会变快）参考下边的博文↓
JAVA前端-Node-Vue-Element-UI-Bootstrap-axios：https://blog.csdn.net/qq_45896330/article/details/125162073

1.3 Vue CLI 使用

• Vue CLl是Vue官方提供的构建工具，通常称为脚手架。
• 用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现修改后的效果）及构建生产版本等功能的单页面应用。
• Vue CLI基于webpack构建，也可以通过项目内的配置文件进行配置。
• 在文件夹的安装: npm install -g @vue/cli

2. Vue CLl使用

创建个vue项目：cmd中输入：vue create demo

3. 组件化开发

3.1 创建Vue项目组件

3.2 组件传值props

3.3 组件值传递效果展示

4. element-ui 介绍

• Element是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了Vue、React、Angular等多个版本。
• 文档地址: https://element.eleme.cn/#/zh-CN/
• 安装: npm i element-ui

4.1 Element的引入全部注册

注册完成之后，Element中的所有组件都注册了，后边都可以使用了

4.2 从Element官网上下载组件使用

Element快速上手组件：https://element.eleme.cn/#/zh-CN/component/table
效果展示