数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

前置导读

1. 学习 Vue3 需要什么知识？

1. 学习 Vue3 需要什么知识？

需要有 HTML5 + CSS3 + JavaScript 基础

对 Node 的包管理器有一定的了解（比如：通过 npm 的方式安装过 Bootstrap、less 等插件）

了解过 Vue2 或者 React 等框架（当然，如果没有了解过问题也不大）

Vue2 学习请移步

学习 Vue3 一定需要学习 TypeScript 吗？
不一定，如果有了解，自然会更好。本课程，暂定原生 JavaScript 语言，根据课程实际进度是否安排 TS 课程。

2. 通过本课程将能学到什么？

Vite 构建工具

Vue3 最新的 setup 语法糖

VueRouter 路由管理

Pinia 状态管理

Axios 基于 promise 的 HTTP 库

ElementPlus 一个 Vue3 的 UI 框架

NodeJS + Express 构建后台服务（选讲）

实战应用（PC、移动端、桌面应用，选讲）

第一章：Vue 简介

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的渐进式 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 采用自底向上增量开发的设计。核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

1.1 核心关键词：构建用户界面

前端开发人员最主要的工作，就是为网站的用户构建出美观、舒适、好用的网页。

在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

 import {ref} from "vue"  const message = ref("Hello Vue3!!") " _ue_custom_node_="true"> { {message}}.message {  color: red;  font-weight: bold;  font-family: "楷体","MicroSoft Yahei"; } " _ue_custom_node_="true">

如你所见，Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。