【VUE3】新版Vue3+ElementPlus全家桶开发视频项目实战

news2024/12/1 5:25:01

VUE 介绍

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

Vue.js是一个MVVM(Model - View - ViewModel)的SPA框架。

Model：数据。
View：视图。
ViewModel：连接View与Model的纽带。
　　Vue.js的安装使用方式有几种，简单的只需要引入一个第三方的JS包即可。在中引入Vue.js包。

本地搭建 Vue 单页应用，可使用npm安装方式，即本文主要内容。

VUE 官网

VUE官网：https://vuejs.org/
VUE官方中文站：https://cn.vuejs.org/

VUE3官网：https://www.vue3js.cn/
VUE官方教程：https://v2.cn.vuejs.org/v2/guide/

Vite官网：https://cn.vitejs.dev/guide/
Element Plus官网：http://element-plus.org/zh-CN/

常用命令汇总

  • npm 或者 pnpm 常用命令
    • pnpm 是一种新型的包管理工具（安装命令：npm install pnpm -g），旨在解决传统包管理工具如 npm 和 yarn 的一些问题。其主要特点和优势包括：
      • 依赖重复安装问题‌：pnpm 通过存储差异文件来避免重复安装依赖，从而节省硬盘空间并加快安装速度‌。
      • 安装速度‌：pnpm 的安装速度比 npm 和 yarn 快很多，尤其是在处理大型项目时更为明显‌。
      • 硬盘空间‌：由于只存储变化了的文件，pnpm 可以显著减少硬盘使用量‌。
npm create vue@latest //npm创建vue项目
npm run build //编译
npm run dev //运行
npm install -g @vue/cli // 全局安装Vue CLI
vue --version //查看Vue CLI是否安装成功
npm install 模块 //本地安装（是将模块下载到当前命令行所在目录）
npm install -g 模块 //模块将被下载安装到“全局目录”中
npm config list //查看基本配置
npm config list -l //查看所有配置
npm config get prefix //npm(pnpm)查看全局安装默认目录
npm config get cache //npm(pnpm)查看全局安装缓存路径
npm config set prefix "目录" //npm(pnpm)设置全局安装默认目录 
npm config set cache "目录" //npm(pnpm)设置全局安装缓存目录 
npm cache clearn -force //清空缓存
npm config set registry //npm(pnpm)设置镜像源
npm config set registry https://registry.npm.taobao.org 
npm config get registry //npm(pnpm)查看镜像设置
npm install pnpm -g // 全局安装pnpm
  • Vite 常用命令
    • 新型前端构建工具，能够显著提升前端开发体验，它主要由两部分组成：
      • 一个开发服务器，它利用 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
      • 一套构建指令，它使用 Rollup 打包你的代码，预配置输出高度优化的静态资源用于生产。
npm create vite@latest //npm创建vite项目
pnpm create vite //pnpm 创建vite项目
pnpm create vite@latest my-vue-app -- --template vue //npm创建vite项目，指定项目名称和你想要使用的模板
pnpm create vite my-vue-app --template vue //pnpm创建vite项目，指定项目名称和你想要使用的模板
npm install -D vite //npm 安装vite命令行工具
pnpm install -D vite //pnpm 安装 vite 命令行工具
npx vite //npm 运行vite项目
pnpm vite //pnpm 运行vite项目

VUE3常见语法汇总

ref()  //const count = ref(0)  //count.value（访问值，包括对象要加.value） //任何类型的值，包括深层嵌套的对象或则JS内置数据结构 
await nextTick() //要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API
reactive() //只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)它不能持有如 string、number 或 boolean 这样的原始类型
模板语法1：<span>Message: {
   {
    msg }}</span>
模板语法2（插入HTML）：<span v-html="rawHtml"></span> 
指令：<div v-bind:id="xd"></div> //常见指令 :id、:disable、:href
计算属性：（1）、import {
    ref, computed } from "vue";  （2）、const booksLength = computed(() => {
     return list.value.books.length > 0 ? "Yes" : "No"; }); （3）、 <span>{
   {
    booksLength }}</span> // 不是以一个函数执行,不加()

条件渲染：v-if、v-else、v-else-if、v-show
列表渲染：（1）、v-for（<li v-for="item in courseList">{
   {
    item }}</li>） ；（2）、of（<li v-for="item of courseList">{
   {
    item }}</li>）
#v-if和v-for是不推荐一起使用在同一个标签
事件监听：v-on:click="handler"  或则 @click="handler"
侦听器：watch（我们需要在状态变化时执行一些“副作用：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态）
侦听器：watchEffect()
onMounted：是一个生命周期钩子(生命周期函数)，用于在组件实例被挂载到 DOM 上后执行代码。
onUnMounted：//组件卸载之后

第二章 搭建Vue3的开发环境+初始Vue3

第1集 详解搭建Vue3的开发环境和注意事项
  • Node环境安装

注意：NodeJs 安装路径不要有空格

安装npm 需要安装note.js（NPM是包含在Node.js里的包管理工具），它具有以下功能：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户把自己编写的包或插件上传到NPM服务器供别人下载使用。来自各地的开源软件开发者可以使用 npm 互相分享和借鉴。包的结构使软件开发者能够轻松跟踪项目依赖项和版本。

  • Node版本选择
    • 下载地址：https://nodejs.org/en/download
      在这里插入图片描述

（1）、检查node+npm版本

node -v //检查node版本
npm -v //检查npm版本

（2）、配置npm下载时的默认安装目录和缓存日志目录

​这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为npm install express [-g] 执行全局安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径目录下，久而久之C盘很容易被占满（C盘足够大可以无视此步骤），通过设置，将默认安装目录和缓存日志目录重新配置到其他盘符节约C盘空间

   此处举例选择放在：D:\Program\nodejs 目录下的node_global目录里（也可提前在文件资源管理器中建立好相应的文件夹）

输入以下命令配置npm的全局模块的存放路径和cache的路径：

（路径按实际情况更改为自己的路径）

npm config set prefix "D:\Program\nodejs\node_global" 
npm config set cache "D:\Program\nodejs\node_cache"

查看一下npm的安装路径

#查看npm全局安装保存路径
npm config get prefix  

#查看npm安装缓存cache路径
npm config get cache

（3）、配置环境变量
步骤1：进入系统属性页面，系统----》系统信息----》高级系统设置----》高级----》环境变量-----》
步骤2：添加系统变量Path中的值，
【系统变量】下的

【Path】添加上node的安装目录路径【例如：D:\Program\nodejs】

D:\Program\nodejs

【Path】添加上刚才配置的npm下载时的默认安装目录和缓存日志目录

D:\Program\nodejs\node_global
D:\Program\nodejs\node_global\node_modules

（4）、全局安装Vue CLI

Vue CLI（Vue Command Line Interface）是一个由Vue.js官方提供的命令行工具，用于快速搭建和管理Vue.js项目。
通过这个工具，开发者可以简化项目初始化、配置开发服务器、构建和打包过程，并通过插件系统扩展功能，显著提高开发效率‌。

npm install -g @vue/cli //全局安装脚手架
vue --version //查看Vue CLI是否安装成功
  • 开发编辑工具
    • Vscode（Visual Studio Code）
      • 下载地址：https://code.visualstudio.com/Download
        在这里插入图片描述
第2集 创建第一个Vue3的应用
  • 创建第一个Vue3的应用
    • 通过CDN使用Vue
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  • 静态
<div id="app">{
   {
    message }}</div>

<script type="module">
  import {
    createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
   
    setup() {
   
      const message = ref('Hello Vue!')
      return {
   
        message
      }
    }
  }).mount('#app')
</script>

// 接收一个“容器”参数：<div id="app">{
   { message }}</div>，是一个 CSS 选择器字符串
// .mount() 方法应该始终在整个应用配置和资源注册完成后被调用
  • 响应式跟新

可能会出现一种叫做“未编译模板闪现”的情况，解决办法 加 v-cloak 内置指令，vue官网搜索 v-cloak 查看用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span>{
   {
    count }}</span>
        <button @click="add">加</button>

    </div>
    
<script type="module">
  import {
   createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
   
    setup() {
   
      const count = ref(0) 
      const add = () => count.value++; //此处要用 count.value
      return {
   
        count,
        add
      }
    }
  }).mount('#app')
</script>
</body>
</html>
  • 通过 npm 或者 pnpm 创建项目

说明：“左<- 右->” 键 选择 是/否

npm create vue@latest //创建vue项目
pnpm create vue@latest //创建vue项目

在这里插入图片描述
在这里插入图片描述

  • 通过Vite或者官方的命令行创建Vue3项目（推荐方式）
pnpm create vite //pnpm 创建vite项目(推荐：pnpm+vite)
pnpm create vite@latest //
pnpm create vite my-vue-app --template vue //创建vite项目,指定项目名称和你想要使用的模板
pnpm install -D vite //安装 vite 命令行工具
pnpm dev //运行
pnpm vite //运行

在这里插入图片描述
在这里插入图片描述

第3集 玩转Vue3的模板语法+Attribute 绑定
  • 模板语法

文本插值

<span>Message: {
   {
    msg }}</span>

插入HTML

<p>插值语法插入html: {
   {
    <span style="color: red">小白课堂</span> }}</p>
<p>v-html指令: <span v-html="rawHtml"></span></p>
  • 模板语法
    • v-bind 指令
<div v-bind:id="xd"></div>

<div :id="xd"></div>

<button :disabled="isDisabled"> 按钮 </button>

<a :href="https://xbclass.com"> 小白课堂官网 </a>
第4集 Vue3框架当中如何实现响应式
  • 响应式
    • ref()
const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

在模板中使用不需要加 .value

  • <script setup> 相当于
setup(){
   
	const xd = '小白课堂';
	return
	{
   
	 xd
	}
}

在 setup() 函数中手动暴露大量的状态和方法非常繁琐

  • DOM更新时机

    • 当你修改了响应式状态时，DOM 会被自动更新，但是更新并不是同步的，Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次

    • 要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API

import {
    nextTick } from 'vue'

async function increment() {
   
  count.value++
  await nextTick()
  // 现在 DOM 已经更新了
}
  • reactive()
    • 它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型
    • 不能替换整个对象
    • 对解构操作不友好

第三章 全面剖析Vue3最新基础核心知识点

第1集 详解Vue3的计算属性
  • 计算属性
    • 为什么后面不加()，不是以一个函数执行
    • 使用缓存，减少性能消耗
<script setup>
import {
    ref, computed } from "vue";
const list = ref({
   
  books: [
    "语文",
    "数学",
    "英语",
  ],
});

// 一个计算属性 ref
const booksLength = computed(() => {
   
  return list.value.books.length > 0 ? "Yes" : "No";
});
</script>

<template>
  <p>拥有书籍的个数:</p>
  <span>{
   {
    booksLength }}</span>
</template>
  • 可写计算属性
<script setup>
import {
    ref, computed } from "vue";
const firstName = ref("老");
const lastName = ref("王");

const fullName = computed({
   
  // getter
  get() {
   
    return firstName.value + " " + lastName.value;
  },
  // setter
  set(newValue) {
   
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(" ");
  },
});
// fullName.value = "范 冰冰";
</script>

<template>
  <p>Has published books:</p>
  <span>{
   {
    fullName }}</span>
</template>
第2集 详解Vue3的类与样式绑定
  • 类绑定
    （1）、绑定 HTML class
<script setup>
import {
    ref, computed } from "vue";
const isActive = ref(true);
const isTitle = ref(true);
const computedClass = computed(() => ({
    active: isActive, title: isTitle }));
</script>

<template>
  <div :class="computedClass">小白课堂</div>
</template>

在这里插入图片描述
（2）、绑定数组

<script setup>
import {
    ref } from "vue";
const active = ref("active");
const title = ref("title");
const isActive = ref(true);
</script>

<template>
  <div :class="[isActive ? active : '', title]">小白课堂</div>
</template>


<script setup>
import {
    ref } from "vue";
const active = <

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2250900.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

常用函数的使用错题汇总

常用函数的使用错题汇总

#include <iostream> #include <fstream> #include <string>int main() {std::ifstream fin("example.txt"); // 创建 ifstream 对象并打开文件// 检查文件是否成功打开if (!fin) {std::cerr << "Error opening file!" << s…
阅读更多...
Android电视项目焦点跨层级流转

Android电视项目焦点跨层级流转

1. 背景 在智家电视项目中&#xff0c;主要操作方式不是触摸&#xff0c;而是遥控器&#xff0c;通过Focus进行移动&#xff0c;确定点击进行的交互&#xff0c;所以在电视项目中焦点、选中、确定、返回这几个交互比较重要。由于电视屏比较大&#xff0c;在一些复杂页面中会存…
阅读更多...
Linux -初识 与基础指令1

Linux -初识 与基础指令1

博客主页&#xff1a;【夜泉_ly】 本文专栏&#xff1a;【Linux】 欢迎点赞&#x1f44d;收藏⭐关注❤️ 文章目录 &#x1f4da; 前言&#x1f5a5;️ 初识&#x1f510; 登录 root用户&#x1f465; 两种用户➕ 添加用户&#x1f9d1;‍&#x1f4bb; 登录 普通用户⚙️ 常见…
阅读更多...
Oracle12.2 RAC集群管理修改IP地址（DNS解析）

Oracle12.2 RAC集群管理修改IP地址（DNS解析）

Oracle12.2 RAC集群管理之修改IP地址 该章节实验是基于此章节基础上操作&#xff1a; Oracle LinuxR7安装Oracle 12.2 RAC集群实施&#xff08;DNS解析&#xff09;-CSDN博客 环境 改前IP&#xff1a; 172.30.21.101 hefei1 hefei1.hefeidb.com 172.30.21.102 hefei2 …
阅读更多...
Git——本地仓库链接并推送到多个远程仓库

Git——本地仓库链接并推送到多个远程仓库

步骤 1. 新建仓库init 或 删除已有仓库远程链接 // 1.新建init git init// 2.已有仓库&#xff0c;查看链接的远程仓库 git remote -v// 3.已有远程连接仓库&#xff0c;需要删除连接 git remote rm origin(或对应远程仓库名) 2.新建远程仓库 在gitee、github等托管平台创建…
阅读更多...
IDEA某个Impl下的引入的文件红色

IDEA某个Impl下的引入的文件红色

IDEA某个Impl下的引入的文件红色&#xff0c;可以正常启动&#xff0c;而且文件是存在的 1.什么情况下会出现这个问题 我的是在不关闭项目的情况下就把电脑关机了&#xff0c;因为这样第二天开机&#xff0c;启动IDEA就会把昨天关机前所有开启的项目全部开启 &#xff0c;这样有…
阅读更多...
docker使用(镜像、容器)

docker使用(镜像、容器)

docker基础使用 文章目录 前言1.镜像操作1.1命令介绍1.2.案例实操1.2.1查找镜像1.2.2下载镜像1.2.3查看当前镜像 2.容器操作2.1命令2.1.1容器创建与启动2.1.2. 容器查看2.1.3. 容器操作2.1.4. 容器删除2.1.5. 容器日志2.1.6. 容器内文件操作2.1.7. 容器内命令执行2.1.8. 其他常…
阅读更多...
6.STM32之通信接口《精讲》之IIC通信---硬件IIC（STM32自带的硬件收发器）

6.STM32之通信接口《精讲》之IIC通信---硬件IIC（STM32自带的硬件收发器）

上一节&#xff0c;完成了对IIC软件的实验程序&#xff0c;也就是说只要我们编程能够模拟IIC协议规定的时序&#xff0c;所有IIC的外设就能解析IIC的读出我们数据&#xff0c;就能和相关IIC外设进行交互&#xff0c;然后&#xff0c;STM32自带硬件收发电路&#xff0c;接下来我…
阅读更多...
springboot337校园失物招领系统pf(论文+源码)_kaic

springboot337校园失物招领系统pf(论文+源码)_kaic

校园失物招领网站的设计与实现 摘要 近年来&#xff0c;信息化管理行业的不断兴起&#xff0c;使得人们的日常生活越来越离不开计算机和互联网技术。首先&#xff0c;根据收集到的用户需求分析&#xff0c;对设计系统有一个初步的认识与了解&#xff0c;确定校园失物招领网站…
阅读更多...
智能探针技术：实现可视、可知、可诊的主动网络运维策略

智能探针技术：实现可视、可知、可诊的主动网络运维策略

网络维护的重要性 网络运维是确保网络系统稳定、高效、安全运行的关键活动。在当今这个高度依赖信息技术的时代&#xff0c;网络运维的重要性不仅体现在技术层面&#xff0c;更关乎到企业运营的方方面面。网络运维具有保障网络的稳定性、提升网络运维性能、降低企业运营成本等…
阅读更多...
mybatis笔记01——初始配置

mybatis笔记01——初始配置

JavaEE三层架构&#xff1a;表现层&#xff08;负责与用户的交互&#xff0c;通常实现了用户界面&#xff09;、业务逻辑层&#xff08;处理核心业务规则和逻辑&#xff0c;是应用程序的“心脏”。&#xff09;、数据访问层&#xff08;负责与数据源&#xff08;如数据库&#…
阅读更多...
第7篇 寻找最大数___ARM C语言程序＜三＞

第7篇 寻找最大数___ARM C语言程序＜三＞

Q&#xff1a;可以将寻找到的最大数结果显示在DE1-SoC开发板的硬件外设如红色LED上吗&#xff1f; A&#xff1a;基本原理&#xff1a;对红色LED的Data寄存器进行写操作即可。DE1-SoC_Computer系统上连接到红色LED的并行端口的内存映射地址为0xFF200000&#xff0c;是一个18位…
阅读更多...
力扣刷题TOP101：6.BM7 链表中环的入口结点

力扣刷题TOP101：6.BM7 链表中环的入口结点

目录&#xff1a; 目的 思路 复杂度 记忆秘诀 python代码 目的 {1,2},{3,4,5}, 3 是环入口。 思路 这个任务是找到带环链表的环入口。可以看作是上一题龟兔赛跑&#xff08;Floyd 判圈算法&#xff09;的延续版&#xff1a;乌龟愤愤不平地举报兔子跑得太快&#xff0c;偷偷…
阅读更多...
webrtc视频会议学习（三）

webrtc视频会议学习（三）

文章目录 关联&#xff1a;源码搭建coturn服务器nginx配置ice配置需服务器要开放的端口 效果 关联&#xff1a; webrtcP2P音视频通话&#xff08;一&#xff09; webrtcP2P音视频通话&#xff08;二&#xff09; webrtc视频会议学习&#xff08;三&#xff09; 源码 WebRTC…
阅读更多...
mac上的建议xftp 工具

mac上的建议xftp 工具

mac上的建议xftp 工具 最近使用mac比较频繁了&#xff0c;但是第一次重度使用mac里面有很多的工具都是新的&#xff0c;有的window版本的工具无法使用。 xftp 的平替 Cyberduck 从它的官网上下载是免费的&#xff0c;但是如果使用 Apple store 要花费198呢。这不就剩下一大笔…
阅读更多...
paimon的四种changelog模式（1）-input模式

paimon的四种changelog模式（1）-input模式

环境创建 CREATE CATALOG fs_catalog WITH (typepaimon,warehousefile:/data/soft/paimon/catalog );USE CATALOG fs_catalog;drop table if exists t_changelog_input;CREATE TABLE t_changelog_input (age BIGINT,money BIGINT,hh STRING,PRIMARY KEY (hh) NOT ENFORCED )WIT…
阅读更多...
【趣味】斗破苍穹修炼文字游戏HTML,CSS,JS

【趣味】斗破苍穹修炼文字游戏HTML,CSS,JS

目录 图片展示 游戏功能 扩展功能 完整代码 实现一个简单的斗破苍穹修炼文字游戏&#xff0c;你可以使用HTML、CSS和JavaScript结合来构建游戏的界面和逻辑。以下是一个简化版的游戏框架示例&#xff0c;其中包含玩家修炼的过程、增加修炼进度和显示经验值的基本功能。 图片…
阅读更多...
一款现代化的轻量级跨平台Redis桌面客户端

一款现代化的轻量级跨平台Redis桌面客户端

Tiny RDM‌ 是一款现代化的轻量级跨平台Redis桌面客户端&#xff0c;专为开发和运维人员设计&#xff0c;旨在提供便捷、高效的Redis操作体验。它支持macOS、Windows和Linux操作系统&#xff0c;安装包大小约为10MB&#xff0c;具有广泛的兼容性和便携性‌。 功能特性 ‌轻量级…
阅读更多...
【大数据学习 | Spark调优篇】Spark之JVM调优

【大数据学习 | Spark调优篇】Spark之JVM调优

1. Java虚拟机垃圾回收调优的背景 如果在持久化RDD的时候&#xff0c;持久化了大量的数据&#xff0c;那么Java虚拟机的垃圾回收就可能成为一个性能瓶颈。因为Java虚拟机会定期进行垃圾回收&#xff0c;此时就会追踪所有的java对象&#xff0c;并且在垃圾回收时&#xff0c;找…
阅读更多...
《使用Python进行数据挖掘：理论、应用与案例研究》

《使用Python进行数据挖掘：理论、应用与案例研究》

嘿&#xff0c;今天我要给你们介绍一本使用Python进行数据挖掘的好书。这本书是由吴迪博士撰写的&#xff0c;他是雷曼学院商学院的助理教授&#xff0c;也是数据科学的实战派。 在这个时代&#xff0c;数据多得让人眼花缭乱&#xff0c;要从中找出有用的信息&#xff0c;那可不…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023