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

文章目录

1.前言
2.包管理工具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版本

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

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

cd vite-project
npm install 
npm run dev

如下:

Local:就是项目的url

项目打包命令:npm run build

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

项目部署:

前后分离方式：需要把 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,输入组件名即可

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

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 的元素上。

具体如下图所示