前言

3月16日

开完了会议，确定好了方向，我需要提供的是控制打印机的代码，还有监控程序...

哦对了，还有渲染视频

本人开发方向主要偏向后端，前端写的依托答辩

于是...开启了vue的学习之旅...

为什么不学react呢...来不及了啊喂!!!

Vue 启动！

速读开发文档

let me see see开发文档

https://cn.vuejs.org/guide/quick-start

文档中提到了，可以通过script标签引入vue，这太棒了，这意味我能省很多测试时间，甚至不用搭建专门的测试环境

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

注意:

“这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。当然，你也可以下载此文件并自行提供服务。

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。”

一些基本的操作

安装好node.js 创建vue项目

npm create vue@latest

嗯...看起来是个脚手架

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

“如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。”

运行dev

cd <your-project-name>
npm install
npm run dev

发布

npm run build

通过 CDN 使用 Vue

上文也提到了可以直接使用script标签引入Vue框架，现在来看看

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

使用全局构建版本

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

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

使用 ES 模块构建版本

<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>
需要注意

如果直接在浏览器中打开了上面的 index.html，你会发现它抛出了一个错误，因为 ES 模块不能通过 file:// 协议工作，也即是当你打开一个本地文件时浏览器使用的协议。

由于安全原因，ES 模块只能通过 http:// 协议工作，也即是浏览器在打开网页时使用的协议。为了使 ES 模块在我们的本地机器上工作，我们需要使用本地的 HTTP 服务器，通过 http:// 协议来提供 index.html。

二者的区别
使用全局构建版本
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const message = ref('Hello vue!');
      return { message };
    }
  }).mount('#app');
</script>
使用 ES 模块构建版本
<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>

现在项目时间这么赶　仕方がないなぁ

似乎只能选全局构建了呢

题外

嗯...有点没看懂，滚回去翻简介了

真的，在开始项目之前真心建议好好看看简介

https://cn.vuejs.org/guide/introduction

嗯...

我看到了什么声明式开发，组件，这让我想起了Spring

1. 声明式开发
  • Java SSM 框架：在 Java 的 SSM 框架（Spring、Spring MVC、MyBatis）中，开发人员通过配置文件（如 XML）或注解来声明组件的行为和关系。例如，在 Spring 中，可以通过 @Controller、@Service、@Repository 等注解来声明不同层次的组件。
  • Vue：在 Vue 中，通过模板语法（如 {{ }}）和组件选项（如 data、methods）来声明界面和数据的关系。这种声明式的方式使得开发更加直观和高效。
2. 组件化开发
  • Java SSM 框架：在 SSM 框架中，可以将应用分解为多个模块，每个模块负责不同的功能。例如，Spring 的 IoC 容器管理着各个 Bean 的生命周期和依赖关系，实现了模块间的松耦合。
  • Vue：Vue 的组件化开发允许将界面分解为独立的组件，每个组件有自己的模板、逻辑和样式。这与 SSM 框架中的模块化开发思想相似，都强调代码的复用性和可维护性。
3. 配置与约定
  • Java SSM 框架：SSM 框架通过配置文件或注解来定义应用的行为，同时也遵循一定的约定（如 Spring 的自动配置）。这使得开发更加灵活，同时减少了样板代码的编写。
  • Vue：Vue 也提供了一些约定，如组件的命名规则、选项的定义等。同时，Vue 的配置文件（如 vue.config.js）允许开发者根据需要进行定制化配置。

看起来有些相似...很好，这让我对接下来的工作充满信心

单文件组件：“在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例：”

这看起来就是把前端三大件封装在了一起

Vue的两种Api风格
选项式 API 与组合式 API

Vue 提供了两种主要的 API 风格来书写组件逻辑：选项式 API（Options API）和组合式 API（Composition API）。

选择建议

学习阶段

生产项目

嗯，做单页应用吧，组合式，决定了

剩下的区域以后再来探索吧~

累了，收工