「Vue3+SpringBoot+Matlab」实验平台（二）｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动

这是我参与「第五届青训营」伴学笔记创作活动的第 17 天

前端环境配置

首先要找一个合适的地方放下整个前端部分的文件夹，这部分就和各自的环境有关了。我是在硬盘的根目录下建立了一个front文件夹，所以绝对路径的目录就是：F:\front\plat(plat是项目名，可以再在后面 vite 生成的地方输入。)，详细路径方面的东西后面应该用得到。

不同系统文件路径分隔符

Linux/Macos: /

Windows：``

一般语言都有特定的“路径分隔符”，相比字符串/字符类型+转义字符能更通用.

Python： os.path.sep

Java：File.separator

1. Vite

继 Vue2 的 Vue-Cli 之外，Vue3 推出了新的工具链/构建工具 Vite，用起来还是比较方便的，本项目就是用 Vite 构建的。安装 Vite 之前首先得安装 Node.js, Vite 里面提到需要 Node.js 版本 14.18+，16+，注意需要适当更新一下。
之后就可以下载使用 Vite 了：Vite | 下一代的前端工具链 (vitejs.dev)。参照开始 | Vite 官方中文文档 (vitejs.dev) 的说明，可以采用 NPM, Yarn,或者 PNPM 安装。

NPM 是随同 NodeJS 一起安装的包管理工具，能解决 NodeJS 代码部署上的很多问题。新版的 NodeJS 已经集成了 NPM，直接用就成。

Yarn,或者 PNPM 是为了解决 NPM 的各种问题的优化包管理工具，各有各的优势，都能用。

不管是哪种安装都采用的是命令行模式，Window 环境下可以 win + R ,打开 cmd，然后 cd 到对应目录，或者直接在文件管理器的文件选项卡打开 PowerShell 。一点题外话是：cmd 本身 cd 到特定目录跨磁盘的时候会出现也许不成功的问题，需要手动转换一下盘符。具体项目脚手架搭建不同包管理工具有不同的命令行，但总的来说脱离不了 Create 这个词。具体可以参照开始 | Vite 官方中文文档 (vitejs.dev)，这个项目用的是 yarn create.可以看到包管理工具会自动帮助准备全部环境，同时在这里我们可以命名我们的项目，我这里就叫 plat 了。之后我们可以选择特定的框架和语言，当然我们这里面选的是 Vue 和 JavaScript。（顺便一提，Vite 能用来搭建 React 的框架，至于 React 用不用它就不知道了。）在执行了 yarn install 下载对应的 node_modules 环境之后，我们就可以采用 npm run dev 运行脚手架了。

│  .gitignore
│  index.html                  //访问路径
│  package.json                //Vue3包管理
│  README.md
│  vite.config.js              //Vue3配置
├─.vscode
│      extensions.json
├─public
│      vite.svg
└─src
    │  App.vue                 //单页面应用的“单页面”
    │  main.js                 //主调用JavaScript
    │  style.css
    ├─assets
    │      vue.svg
    └─components               //组件路径
            HelloWorld.vue

建立脚手架之后的文件目录大概如上所示，一些没用的部分该删删，例如 .gitignore 负责和 git 对接，README.md 属于简介文档，.vscode 是 vscode 的配置，style.css，HelloWorld.vue, vue.svg，是 Vue3 初始展示的页面 (如下)的需要部分，负责组件，风格什么的。

style.css 是默认脚手架的 css 文件，千万记得删 & 在 main.js 去掉 import './style.css'

后面就可以进行 Vue3 的开发了。

2. Vue 3

首先来介绍一下 Vue3 整个项目的内容和各部分功能。

单个 .vue 文件

单个 .vue 文件由三个部分组成，分别是 <template>, <script setup> 和 <style scoped>。

<template>：构建项目中的元素，即对应 html 的逻辑，采用标签语法，分别构建元素。
<script setup>：构建项目中元素的功能，即对应 JavaScript 或者 TypeScript 的逻辑，采用函数式编程，分别实现功能。
<style scoped>：构建项目中的设计，对应 css 的逻辑，采用和 html 搭配进行页面颜色版式设计。

<template> //-------------1---------------
  <div>
    <el-result
      icon="warning"
      title="404 Not FOUND"
      sub-title="你找的页面走失了">
      <template #extra>
        <el-button type="primary" @click="$router.push('/')">Back</el-button>
      </template>
    </el-result>
  </div>
</template>
<script setup> //-------------2---------------
</script> 
<style scoped> //-------------3---------------
</style>

如上所示是 404 页面的 vue3 组件。可以很明显看到三个部分，单个组件的基本逻辑是：html 构建元素，通过标签联系 script 和 css。比如这个页面是构建了 el-result 搭配 el-button 组件，通过 @click 触发全局的 router.push() 方法 (该方法已在全局引用)。

「Vue3+SpringBoot+Matlab」实验平台（二）｜ 青训营笔记

前端环境配置

1. Vite

2. Vue 3

单个 .vue 文件

「Vue3+SpringBoot+Matlab」实验平台（二）｜青训营笔记