Vscode+Pycharm+Vue.js+WEUI+django火锅(三)理解Vue

新创建的Vue项目里面很多文件,对于新手,老老实实做一下了解。

1.框架逻辑
框架的逻辑都是相通的,花点时间理一下就清晰了。

2.文件目录及文件
创建好的vue项目下,主要的文件和文件夹要先认识一下,并与框架逻辑对应起来
public下面的index.html
src下面主要文件:
main.js  主js文件
App.vue 主组件:主要三部分script/template/style

看其它人的文章,应该是有Router文件夹,而我的没有,于是
npm install vue-router安装
安装完成了,依赖里面是有了。
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.4.5"
  },
但是文件夹里面没有router,手工创建文件夹还需要继续:
a.创建index.js
b.修改main.jsp,添加:
c.import router from './router'
改起来觉得这很麻烦,于是决定删除重建,因为最根本原因就是自己安装时使用默认安装导致,删除项目文件夹,重建后OK。

3.主js文件:main.js

import { createApp } from 'vue'
import App from './App.vue'  
import router from './router'  ---引入了路由

createApp(App).use(router).mount('#app')--初始化

4.路由文件:router/index.js
{
    path: '/about',   //访问路径
    name: 'about',  //显示的名字
    component: () => import('../views/AboutView.vue') //调用路由时加载的视图或组件
  }

5.主组件App.vue
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>//是承接自路由的容器  (这个不要删除,很多时候路由了但页面不显示,多半原因出在这里
</template>
这些理清楚后,Vue的大门算是摸着了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/55988.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机毕业设计 校内跑腿业务系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

dayu_widgets-简介

前言: 越来越多的人开始使用python来做GUI程序&#xff0c;市面上却很少有好的UI控件。即使有也是走的商业收费协议&#xff0c;不敢使用&#xff0c;一个不小心就收到法律传票。 一、原始开源项目: 偶然在GitHub上发现了这个博主的开源项目。https://github.com/phenom-films…

YOLO11改进|SPPF篇|引入YOLOv9提出的SPPELAN模块

目录 一、【SPPELAN】模块1.1【SPPELAN】模块介绍1.2【SPPELAN】核心代码 二、添加【SPPELAN】模块2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、【SPPELAN】模块 1.1【SPPELAN】模块介绍 下图是【SPPELAN】的结构图&#xff0c;让我们…

OOOPS:零样本实现360度开放全景分割,已开源 | ECCV‘24

全景图像捕捉360的视场&#xff08;FoV&#xff09;&#xff0c;包含了对场景理解至关重要的全向空间信息。然而&#xff0c;获取足够的训练用密集标注全景图不仅成本高昂&#xff0c;而且在封闭词汇设置下训练模型时也受到应用限制。为了解决这个问题&#xff0c;论文定义了一…

环球资源网 海外 globalsource reese84 分析

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 有相关问题请第一时间头像私信联系我删…

Graph知识图谱融入向量数据库,带来RAG效果飞升

01. 前言 随着大型语言模型&#xff08;LLMs&#xff09;在各种应用中的广泛使用&#xff0c;如何提升其回答的准确性和相关性成为一个关键问题。检索增强生成&#xff08;RAG&#xff09;技术通过整合外部知识库&#xff0c;为LLMs提供了额外的背景信息&#xff0c;有效地改…

使用激光跟踪仪提升码垛机器人精度

标题1.背景 码垛机器人是一种用于工业自动化的机器人&#xff0c;专门设计用来将物品按照一定的顺序和结构堆叠起来&#xff0c;通常用于仓库、物流中心和生产线上&#xff0c;它们可以自动执行重复的、高强度的搬运和堆垛任务。 图1 码垛机器人 传统调整码垛机器人的方法&a…

【重学 MySQL】四十六、创建表的方式

【重学 MySQL】四十六、创建表的方式 使用CREATE TABLE语句创建表使用CREATE TABLE LIKE语句创建表使用CREATE TABLE AS SELECT语句创建表使用CREATE TABLE SELECT语句创建表并从另一个表中选取数据&#xff08;与CREATE TABLE AS SELECT类似&#xff09;使用CREATE TEMPORARY …

maven指定模块快速打包idea插件Quick Maven Package

问题背景描述 在实际开发项目中&#xff0c;我们的maven项目结构可能不是单一maven项目结构&#xff0c;项目一般会用parent方式将各个项目进行规范&#xff1b; 随着组件的数量增加&#xff0c;就会引入一个问题&#xff1a;我们只想打包某一个修改后的组件A时就变得很不方便…

企业数据安全防泄密要怎么做?七个措施杜绝泄密风险!

随着信息技术的快速发展&#xff0c;企业的核心数据已成为最具价值的资产之一。然而&#xff0c;数据泄露事件频发&#xff0c;不仅会给企业造成严重的经济损失&#xff0c;还会影响企业的声誉。因此&#xff0c;如何防止企业数据泄密已成为每个企业管理者关注的重点。以下是七…

利用特征点采样一致性改进icp算法点云配准方法

1、index、vector 2、kdtree和kdtreeflann 3、if kdtree.radiusSearch(。。。) > 0)

js拼接html代码在线工具

具体请前往&#xff1a;在线Html转Js--将Html代码转成javascript动态拼接代码并保持原有格式

年薪30W的Java程序员都要求熟悉JVM与性能调优!

一、JVM 内存区域划分 1.程序计数器&#xff08;线程私有&#xff09; 程序计数器&#xff08;Program Counter Register&#xff09;&#xff0c;也有称作为 PC 寄存器。保存的是程序当前执行的指令的地址&#xff08;也可以说保存下一条指令的所在存储单元的地址&#xff0…

在线教育的未来:SpringBoot技术实现

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理微服务在线教育系统的相关信息成为必然。开…

springboot酒店客房管理系统-计算机毕业设计源码43070

目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1系统开发流程 2.2.2 用户登录流程 2.2.3 系统操作流程 2.2.4 添加信息流程 2.2.5 修改信息流程 2.2.6 删除信息流程 2.3 系统功能…

Mybatis-plus的基础用法

文章目录 1. 核心功能1.1 配置与编写规则1.2 条件构造器1.3 自定义SQL1.4 IService接口1.4.1 Lambda方法1.4.2 批量新增 1.5 分页查询 2. 拓展功能2.1 代码生成器2.2 DB静态工具2.3 逻辑删除2.4 枚举处理器 参考 1. 核心功能 1.1 配置与编写规则 Maven依赖&#xff1a; <…

(怎么从0构建起框架1:)读VM-UNet: Vision Mamba UNet for Medical Image Segmentation有感

参考博客&#xff1a; VMamba&#xff1a;SS2D的实现-CSDN博客了解SS2D&#xff1a;VMamba&#xff1a;SS2D的实现-CSDN博客 VMamba原文&#xff1a;2401.10166 (arxiv.org) 主要参考学习博客&#xff1a;VM-UNet: Vision Mamba UNet for Medical Image Segmentation-CSDN博…

深入理解 CSS 浮动(Float):详尽指南

“批判他人总是想的太简单 剖析自己总是想的太困难” 文章目录 前言文章有误敬请斧正 不胜感恩&#xff01;目录1. 什么是 CSS 浮动&#xff1f;2. CSS 浮动的历史背景3. 基本用法float 属性值浮动元素的行为 4. 浮动对文档流的影响5. 清除浮动clear 属性清除浮动的技巧1. 使用…

NeuVector部署、使用与原理分析

文章目录 前言1、概述2、安装与使用2.1、安装方法2.1.1、部署NeuVector前的准备工作2.1.1.1 扩容系统交换空间2.1.1.2 Kubernetes单机部署2.1.1.2.1 部署Docker2.1.1.2.2 部署Kubectl2.1.1.2.3 部署Minikube 2.1.1.3 Helm部署 2.1.2、使用Helm部署NeuVector 2.2、使用方法2.2.1…

Redis入门第四步:Redis发布与订阅

欢迎继续跟随《Redis新手指南&#xff1a;从入门到精通》专栏的步伐&#xff01;在本文中&#xff0c;我们将深入探讨Redis的发布与订阅&#xff08;Pub/Sub&#xff09;模式。这是一种强大的消息传递机制&#xff0c;适用于各种实时通信场景&#xff0c;如聊天应用、实时通知和…