快速搭建vue3+flask实现一个异物检测项目 - 指南

文章目录

• • 1.研究背景
  • 2.框架设计
  • 3.利用vue-cli快速搭建一个vue3原型界面
  • 3.SFC语法定义
  • • 3.1 语法总览
  • 4.搭建步骤
  • 5.界面展示
  • 路由设计

1.研究背景

最近论文最后一部分，需要替代qt做一个企业级的界面，就比如vue2/vue3，当然了vue2早在2023年12月31号就停止了维护，这使得本文选择用vue3来快速搭建。

2.框架设计

包含登录注册界面，密码修改界面，检测系统主页面。

3.利用vue-cli快速搭建一个vue3原型界面

先了解一下单文件系统，根据vue官网解释，那么对于我们的需求，我们只需要写4个组件就好了，对应4个页面，4个SFC，然后走后端接口对接，这样也就构成了我们需要的系统。

从上图可以看出，script标签不陌生，代表着前端三剑客中的js，template代表着前端中的html，style代表着前端中的css，也就是样式。

上图说明了SFC是如何工作的，Vue单文件组件是一个框架指定的文件格式，必须交给@vue/compiler-sfc编译为标准的JS和CSS，一个编译后的SFC是一个标准的JS（ES）模块，这也意味着在构建配置正确的前提下，你可以像导入其他ES模块一样导入SFC。SFC中的

SFC并不是把前端三剑客分离了，而是放在一起集中管理，我们必须达成一个共识，那就是前端开发的关注点不是完全基于文件类型分离的。前端工程化的最终目的都是为了能够更好地维护代码。关注点分离不应该是教条式地将其视为文件类型的区别和分离，仅仅这样并不够帮我们在日益复杂的前端应用的背景下提高开发效率。
在现代的UI开发中，我们发现与其将代码库分为三个巨大的层，相互交织在一起，不如将它们划分为松散耦合的组件，再按需求组合起来。在一个组件中，其模板，逻辑和样式本就是有内在联系的，是耦合的，将他们放在一起，实际上使组件更有内聚性和可维护性。
即使你不喜欢SFC这样的形式而仍然选择拆分单独的JS和CSS文件，也没关系，你还是可以通过资源导入功能获得热更新和预编译等功能的支持。

3.SFC语法定义

3.1 语法总览

• *.vue
• 他是一种类似于HTML的自定义文件格式
• 每一个*.vue文件都是由三种顶层语言块构成：,

<template>
  <div class=
  "example">
  {
  {
   msg
  }
  }<
  /div>
  <
  /template>
  <script>
    export default {
    
    data() {
    
    return {
    
    msg: 'Hello world!'
    }
    }
    }
    <
    /script>
    <style>
      .example {
      
      color: red;
      }
      <
      /style>
      <custom1>
        This could be e.g. documentation for the component.
        <
        /custom1>

SRC资源导入

通过引入页面，样式，逻辑，通过src可以轻松地进行外部资源的引入。

比较有意思的一个组件，动态组件，注意在

<script setup>
  import Foo from './Foo.vue'
  import Bar from './Bar.vue'
  <
  /script>
  <template>
    <component :is="Foo" />
      <component :is="someCondition ? Foo : Bar" />
        <
        /template>

请注意组件是如何在三元表达式中被当做变量使用的。

和python中类型,as就是取别名的作用
命名空间组件
可以使用带.的组件标签，例如<Foo.Bar>来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用：

<script setup>
  import * as Form from './form-components'
  <
  /script>
  <template>
    <Form.Input>
      <Form.Label>label<
        /Form.Label>
        <
        /Form.Input>
        <