文章目录

  • Vite 基础学习
  • 一、单页面应用程序
  • 二、Vite 基本使用
  • 2.1 创建 vite 项目
  • 2.2 项目结构
  • 2.3 项目运行流程


Vite 基础学习

一、单页面应用程序

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

【Vue】Vite基础学习_App

特点

  • 单页面应用程序将所有的功能局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的资源（ HTML、JavaScript 和 CSS）。
  • 一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换HTML 的内容，从而实现页面与用户的交互。

优点

① 良好的交互体验

  • 单页应用的内容的改变不需要重新加载整个页面
  • 获取数据也是通过 Ajax 异步获取
  • 没有页面之间的跳转，不会出现“白屏现象”

② 良好的前后端工作分离模式

  • 后端专注于提供 API 接口，更易实现 API 接口的复用
  • 前端专注于页面的渲染，更利于前端工程化的发展

③ 减轻服务器的压力

  • 服务器只提供数据，不负责页面的合成与逻辑的处理，吞吐能力会提高几倍

缺点

① 首屏加载慢

  • 路由懒加载 lazy
  • 代码压缩
  • CDN 加速
  • 网络传输压缩

② 不利于 SEO (search engine optimization)

  • SSR 服务器端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。

二、Vite 基本使用

快速创建 vue 的 SPA 项目方式：

① 基于 vite 创建 SPA 项目

② 基于 vue-cli 创建 SPA 项目

【Vue】Vite基础学习_vue.js_02

2.1 创建 vite 项目

在项目目标文件路径下打开cmd，输入命令：G:\Projects\IdeaProject\Vue\Vite基础>npm init vite-app vite 即可创建出初始项目：

【Vue】Vite基础学习_前端_03

npm install 是 Node Package Manager (npm) 的一个命令，用于在项目中安装所需的依赖包。它会读取项目目录中的 package.json 文件，并从 npm registry 下载定义的依赖包。在项目中使用依赖包的代码之前，通常需要先运行 npm install 命令。

{  // 默认配置的package.json文件
  "name": "vite",
  "version": "0.0.0",
  "scripts": {  // 配置运行的脚本 npm run dev / build 将会启动vite程序
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.4",
    "vite": "^1.0.0-rc.13"
  }
}

进入到 vite 目录下，运行命令： npm install :

【Vue】Vite基础学习_vue.js_04

然后运行命令：npm run dev，启动 vite 程序，

【Vue】Vite基础学习_前端_05

浏览器输入网址： http://localhost:3000/ 可进入创建的初始页面：

【Vue】Vite基础学习_前端_06

2.2 项目结构

在vscode中打开项目：

【Vue】Vite基础学习_vue.js_07

  • node_modules 目录用来存放第三方依赖包
  • public 是公共的静态资源目录
  • src 是项目的源代码目录（程序员写的所有代码都要放在此目录下）
    ⚫ assets 目录用来存放项目中所有的静态资源文件（css、fonts等）
    ⚫ components 目录用来存放项目中所有的自定义组件
    ⚫ App.vue 是项目的根组件
    ⚫ index.css 是项目的全局样式表文件
    ⚫ main.js 是整个项目的打包入口文件
  • .gitignore 是 Git 的忽略文件
  • index.html 是 SPA 单页面应用程序中唯一的 HTML 页面
  • package.json 是项目的包管理配置文件

2.3 项目运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。其中：

① App.vue 用来编写待渲染的模板结构

② index.html 中需要预留一个 el 区域

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

上述的内容我們通过其具体的代码文件进行合并联系：

【Vue】Vite基础学习_前端_08

最关键的还是 main.js 文件，把 App.vue 渲染到了 index.html 所预留的区域中

【Vue】Vite基础学习_SPA_09

通过最终的页面源码验证我们的猜想，可以看到猜想基本正确，需要注意的是在vue的组件中我们的前端代码需要包含在<template>标签之中，但是最终在页面中该标签不会显示 ：

【Vue】Vite基础学习_学习_10