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,一经查实,立即删除!

相关文章

云原生化 - 监控(简约版)

要在程序中暴露指标&#xff0c;并符合 Prometheus 和 Kubernetes 的规范&#xff0c;可以按照以下步骤进行&#xff1a; 1. 选择合适的库 根据你的编程语言选择适合的 Prometheus 客户端库。例如&#xff1a; Go: github.com/prometheus/client_golangJava: io.prometheus:…

计算机毕业设计 校内跑腿业务系统的设计与实现 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;论文定义了一…

软件测试面试题大全

什么是软件测试&#xff1f; 答案&#xff1a;软件测试是一系列活动&#xff0c;旨在评估软件产品的质量&#xff0c;并验证它是否满足规定的需求。它包括执行程序或系统以识别任何缺陷、问题或错误&#xff0c;并确保软件产品符合用户期望。 软件测试的目的是什么&#xff1f…

环球资源网 海外 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…

缓存常用的三种读写策略

在现代软件系统中&#xff0c;缓存的使用至关重要&#xff0c;它可以极大地提高系统的性能和响应速度。本文将详细介绍缓存常用的三种读写策略&#xff1a;Cache Aside Pattern&#xff08;旁路缓存模式&#xff09;、Read/Write Through Pattern&#xff08;读写穿透&#xff…

MySQL 锁 简介

要全面解释 MySQL 的锁机制&#xff0c;我们需要从底层原理和源代码的层面展开&#xff0c;讨论 MySQL 锁的分类、实现、如何应用于并发控制、事务隔离级别等。以下是详细的内容&#xff1a; 1. 锁的作用与基本概念 在数据库管理系统&#xff08;DBMS&#xff09;中&#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 系统功能…

机器学习:关联规则:Apriori算法、FP - Growth算法的原理、应用场景及优缺点介绍

一、关联规则算法概述 关联规则挖掘是数据挖掘中的一个重要任务&#xff0c;用于发现数据集中不同项之间的关联关系。 二、Apriori算法 原理 频繁项集生成&#xff1a;Apriori算法基于一个先验原理&#xff0c;即如果一个项集是频繁的&#xff0c;那么它的所有子集也是频繁的…