【前端速通系列|第二篇】Vue3前置知识

文章目录

  • 1.前言
  • 2.包管理工具npm
    • 2.1下载node.js
    • 2.2配置 npm 镜像源
    • 2.3 npm 常用命令
  • 3.Vite构建工具
  • 4.Vue3组件化
  • 5.Vue3运行原理

在这里插入图片描述

1.前言

本系列文章旨在帮助大家快速上手前端开发。

2.包管理工具npm

npm 是 node.js中进行 包管理 的工具. 类似于Java中的Maven。

2.1下载node.js

因此要想使用npm,首先要下载node.js。

node.js下载地址: https://nodejs.org/zh-cn

  • node -v 查看node.js版本
  • npm -v 查看npm版本

image-20240709210838964

2.2配置 npm 镜像源

npm镜像源指的是npm包管理器所使用的替代性服务器,用于下载和安装npm包。由于npm的官方源服务器位于美国,对于中国或其它网络条件不佳的地区的用户来说,直接从官方源下载可能会非常缓慢。为了提高下载速度,一些组织和个人提供了npm的镜像源,这些镜像源定期与官方源同步,以提供相同的服务但更快的下载速度。

以阿里云镜像源举例:

npm config set registry https://registry.npmmirror.com  #设置国内阿里云镜像源
npm config get registry  #查看镜像源

2.3 npm 常用命令

  • npm init: 项目初始化;

    • npm init -y:默认一路yes,不用挨个输入信息
  • npm install 包名:安装js包到项目中(仅当前项目有效)。指定 包名,或者 包名@版本号

    • npm install -g: 全局安装,所有都能用
    • 可以去 npm仓库 搜索第三方库
  • npm update 包名:升级包到最新版本

  • npm uninstall 包名:卸载包

  • npm run:项目运行

3.Vite构建工具

Vite官网: https://cn.vitejs.dev/

  • 快速创建前端项目脚手架
  • 统一的工程化规范:目录结构、代码规范、git提交规范 等
  • 自动化构建和部署:前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作,可以通过集成
  • 自动化部署脚本,自动将代码部署到测试、生产环境等;

使用Vite初始化项目命令:

npm create vite

image-20240709213014665

启动项目命令也提示给我们了

cd vite-project
npm install 
npm run dev

如下:

image-20240709213343601

Local:就是项目的url

image-20240709213446228

项目打包命令:npm run build

打包好的项目都在dist目录下

image-20240709213642962

项目部署:

  • 前后分离方式:需要把 dist 文件夹内容部署到如 nginx 之类的服务器上。
  • 前后不分离方式:把 dist 文件夹内容复制到 SpringBoot 项目 resources 下面

4.Vue3组件化

组件化是Vue3架构和设计的核心特性之一,它帮助开发者将复杂的应用分解为更小、更可管理的部分。

Vue 3继续支持单文件组件(Single File Components),这是Vue中组件的主要形式。SFC允许你在一个文件中定义一个组件的所有方面,包括模板、脚本和样式。

<script setup>//编写脚本
</script><template>//编写页面模板
</template><style scoped>//编写样式
</style>

创建组件: 右键src下的components目录,选择Vue Component,输入组件名即可

image-20240709214535815

在App.Vue中即可完成组件的使用

image-20240709214958828

image-20240709215011614

5.Vue3运行原理

先来看下index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

这个页面很简单,有一个div,id选择器是app.还有script,以模块化的方式引入了src下的main.js

main.js是整个项目模块化的入口

main.js 内容

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'createApp(App).mount('#app')

解释:

  • 从 Vue 的核心库中导入 createApp 函数
  • 导入了style.css导入全局样式表
  • ./App.vue 文件中导入根组件。在 Vue 项目中,App.vue 通常是最顶层的组件,所有其他组件都将嵌套在这个根组件内。
  • 使用 createApp 函数创建一个新的 Vue 应用实例,并将 App 组件作为其根组件。将应用实例挂载到 HTML 文档中的某个元素上。在这里,应用实例被挂载到了 ID 为 app 的元素上。

具体如下图所示

项目中,App.vue 通常是最顶层的组件,所有其他组件都将嵌套在这个根组件内。

  • 使用 createApp 函数创建一个新的 Vue 应用实例,并将 App 组件作为其根组件。将应用实例挂载到 HTML 文档中的某个元素上。在这里,应用实例被挂载到了 ID 为 app 的元素上。

具体如下图所示

image-20240709220554526

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

创建React 项目的几种方式

①.react自带脚手架 使用步骤&#xff1a;&#xff08;自动&#xff09; 1、下载 npm i create-react-app -g 2、创建项目命令&#xff1a; create-react-app 项目名称 ②.Vite构建工具创建react步骤&#xff1a;&#xff08;推荐&#xff09; 方法一&#xff1a; 1、yarn cr…

【笔记】dbeaver导出数据库结构+数据 再导入其他数据库

导出&#xff1a; 导入 然后将语句粘贴进去 会有报错 选全部跳过 然后就全部添加成功了 虽然我不知道为什么报错 但是能加进去数据结构和数据都在就无所谓了 第二个版本 DBeaver导出sql脚本&#xff0c;执行sql脚本-CSDN博客 通过工具 DBeaver操作 MySQL导入备份的 sql 报错…

kali安装vulhub遇到的问题及解决方法(docker及docker镜像源更换)

kali安装vulhub&#xff1a; 提示&#xff1a;项目地址 https://github.com/vulhub/vulhub 项目安装&#xff1a; git clone https://github.com/vulhub/vulhub.git 安装docker 提示&#xff1a;普通用户请使用sudo&#xff1a; 首先安装 https 协议、CA 证书 apt-get in…

【机器学习】使用决策树分类器预测汽车安全性的研究与分析

文章目录 一、决策树算法简介决策树的结构分类和回归树 (CART)决策树算法术语决策树算法直觉 二、属性选择度量信息增益熵 基尼指数计算分割基尼指数的步骤 三、决策树算法中的过度拟合避免过度拟合的方法 四、导入库和数据可视化探索性数据分析重命名列名查看数据集的总结信息…

我的AI音乐梦:ChatGPT帮我做专辑

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;AI篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来ChatGPT帮我做音乐专辑 嘿&#xff0c;朋友们&#xff01; 想象一下&#xff0c;如果有个超级聪明的机器人能帮你写…

Linux Mac 安装Higress 平替 Spring Cloud Gateway

Linux Mac 安装Higress 平替 Spring Cloud Gateway Higress是什么?传统网关分类Higress定位下载安装包执行安装命令执行脚本 安装成功打开管理界面使用方法configure.shreset.shstartup.shshutdown.shstatus.shlogs.sh Higress官网 Higress是什么? Higress是基于阿里内部的…

java LogUtil输出日志打日志的class文件内具体方法和行号

最近琢磨怎么把日志打的更清晰&#xff0c;方便查找问题&#xff0c;又不需要在每个class内都创建Logger对象&#xff0c;还带上不同的颜色做区分&#xff0c;简直不要太爽。利用堆栈的方向顺序拿到日志的class问题。看效果&#xff0c;直接上代码。 1、demo test 2、输出效果…

将vue项目整合到springboot项目中并在阿里云上运行

第一步&#xff0c;使用springboot中的thymeleaf模板引擎 导入依赖 <!-- thymeleaf 模板 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency> 在r…

Golang:数据科学领域中的高性能并发编程新星

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 文章内容 📒📝 并发性能的卓越表现📝 系统级工具的便捷性📝 语言设计的简洁性📝 强类型系统的严格性📝 版本兼容性的稳定性📝 内置工具的全面性⚓️ 相关链接 ⚓️📖 介绍 📖 在数据科学和机器学习的广阔天地…

力扣-回溯法

何为回溯法&#xff1f; 在搜索到某一节点的时候&#xff0c;如果我们发现目前的节点&#xff08;及其子节点&#xff09;并不是需求目标时&#xff0c;我们回退到原来的节点继续搜索&#xff0c;并且把在目前节点修改的状态还原。 记住两个小诀窍&#xff0c;一是按引用传状态…

什么是面向对象编程

什么是面向对象编程&#xff1f;&#xff08;OOP&#xff09; ● 面向对象编程是一种基于对象概念的编程范式&#xff1b;&#xff08;所谓的编程范式&#xff0c;就是代码风格&#xff0c;我们“如何”编写和组织代码&#xff09;&#xff1b; ● 我们使用对象来模拟&#xf…

[C++] STL :stackqueue详解 及 模拟实现

标题&#xff1a;[C] STL &#xff1a;stack&&queue详解 水墨不写bug 目录 &#xff08;一&#xff09;stack简介 &#xff08;二&#xff09;queue简介 &#xff08;三&#xff09;容器适配器 &#xff08;四&#xff09;stack和queue的模拟实现 /*** …

LabVIEW从测试曲线中提取特征值

在LabVIEW中开发用于从测试曲线中提取特征值的功能时&#xff0c;可以考虑以下几点&#xff1a; 数据采集与处理&#xff1a; 确保你能够有效地采集和处理测试曲线数据。这可能涉及使用DAQ模块或其他数据采集设备来获取曲线数据&#xff0c;并在LabVIEW中进行处理和分析。 特…

lvs集群、NAT模式和DR模式、keepalive

目录 lvs集群概念 集群的类型&#xff1a;三种类型 系统可靠性指标 lvs集群中的术语 lvs的工作方式 NAT模式 lvs的工具 算法 实验 数据流向 步骤 一 、调度器配置&#xff08;test1 192.168.233.10&#xff09; 二、RS配置&#xff08;nginx1和nginx2&#xff09;…

Python那些优质可视化工具!

作者&#xff1a;Lty美丽人生 https://blog.csdn.net/weixin_44208569 本次分享10个适用于多个学科的Python数据可视化库&#xff0c;其中有名气很大的也有鲜为人知的&#xff01; 1、matplotlib 两个直方图 matplotlib 是Python可视化程序库的泰斗。经过十几年它任然是Pytho…

王牌站士Ⅴ--mysql9.0发布向量类型糊弄了事

前言 MySQL在本月发布了9.0大版本&#xff0c;作为一个老用户&#xff0c;忍不住关注了一下&#xff0c;简单说下这次大版本更新。 2023年&#xff0c;AI爆火&#xff0c;带动了向量数据库赛道。当下几乎所有主流 DBMS 都已经提供向量数据类型支持 —— MySQL 除外。 大家原…

【vue教程】二. Vue特性原理详解

目录 回顾本章涵盖知识点Vue 实例和选项创建 Vue 实例Vue 实例的选项 Vue 模板语法插值表达式指令v-bindv-modelv-on 自定义指令创建自定义指令在模板中使用自定义指令自定义指令的钩子函数自定义指令的实例演示 指令注册局部注册指令过滤器 数据绑定和响应式原理响应式数据绑定…

【CUDA|CUDNN】安装

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 显卡驱动安装参考之前的文章 cuda、cudnn 安装 1. cuda 安装 访问https://developer.nvidia.com/cuda-toolkit-archive 选择需要的版本&#xff1a;h…

css实现渐进中嵌套渐进的方法

这是我们想要的实现效果&#xff1a; 思路&#xff1a; 1.有一个底色的背景渐变 2.需要几个小的块级元素做绝对定位通过渐变filter模糊来实现 注意&#xff1a;这里的采用的定位方法&#xff0c;所以在内部的元素一律要使用绝对定位&#xff0c;否则会出现层级的问题&…

面试经验之谈

优质博文&#xff1a;IT-BLOG-CN ​通常面试官会把每一轮面试分为三个环节&#xff1a;① 行为面试 ② 技术面试 ③ 应聘者提问 行为面试环节 面试开始的5~10分钟通常是行为面试的时间&#xff0c;面试官会参照简历和你的自我介绍了解应聘者的过往经验和项目经历。由于面试官…