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

news2024/11/24 12:06:31

新创建的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.coloradmin.cn/o/2203252.html

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

相关文章

Centos7 搭建单机elasticsearch

以下是在 CentOS 7 上安装 Elasticsearch 7.17.7 的完整步骤&#xff1a;&#xff08;数据默认保存在/var/lib/elasticsearch下&#xff0c;自行更改&#xff09; 一、装 Java 环境 Elasticsearch 是用 Java 编写的&#xff0c;所以需要先安装 Java 运行环境。 检查系统中是…

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 系统功能…

模拟堆算法

题目 代码 #include <bits/stdc.h> using namespace std; const int N 1e510; int heap[N], sz, cnt; int th[N], ht[N]; void hswap(int a, int b) {swap(heap[a], heap[b]);swap(ht[a], ht[b]);swap(th[ht[a]], th[ht[b]]); } void down(int h) {int t h;if(2*h <…

【开源项目】Jsoncpp的简单使用

Jsoncpp是一个开源项目&#xff0c;它是一个用于处理JSON&#xff08;JavaScript Object Notation&#xff09;数据的C库。它支持将C结构化的数据转化为JSON字符串&#xff0c;也支持将JSON字符串转化为结构化数据 JSON&#xff08;JavaScript Object Notation&#xff09;数据…

质量好的宠物空气净化器分享,希喂、小米、范罗士性能大揭秘

双十一大家都打算买什么&#xff1f;国庆小长假刚结束&#xff0c;没想到下周就开始预售付定金了。看了一圈自己没有什么想买的&#xff0c;就打算给我家毛孩子买点什么。之前一直很纠结要不要买宠物空气净化器&#xff0c;觉得有点贵迟迟没入手&#xff0c;去看了眼&#xff0…

直线导轨在自动化设备中需要注意什么?

直线导轨属于精密传动配件&#xff0c;因而在使用时要求有相当地慎重态度&#xff0c;如果使用不当&#xff0c;也不能达到预期的性能效果&#xff0c;尤其是保管和保养不当&#xff0c;很容易造成导轨失效等问题&#xff0c;导致无法正常使用。因此&#xff0c;自动化设备中使…

UI设计岗前训练

UI设计&#xff0c;全称User Interface Design&#xff0c;即用户界面设计&#xff0c;是指对软件或应用程序的人机交互、操作逻辑、界面美观的整体设计。它涉及软件的操作流程、逻辑、布局、色彩、字体、图标、按钮、动画效果等多个方面&#xff0c;旨在提升用户体验和满意度。…

又被Transformer秀到了!结合小样本学习发A会!

在有限的数据资源下&#xff0c;为了训练出高性能的机器学习模型&#xff0c;我们常会考虑Transformer小样本学习。 这是因为Transformer能从有限的数据中提取更多有用的信息&#xff0c;这样与小样本学习结合&#xff0c;可以更有效的帮助我们提高模型的性能&#xff0c;加速…

C9800的Flex配置

C9800的配置和AireOS WLC的配置架构有了很大的调整&#xff0c;在配置一个WLAN的时候&#xff0c;可能相对麻烦一些&#xff0c;但是架构还是比较清晰。 这里记录一下针对Flex的配置&#xff0c;主要分为如下几个摘要&#xff08;以及对应的CLI配置&#xff09;&#xff1a; 1…

python+request+unittest+ddt自动化框架

参考资料&#xff1a; 用户中心 - 博客园 抓包模拟器笔记 肖sir__接口自动化pythonrequestddt&#xff08;模版&#xff09; - xiaolehua - 博客园 pythonrequestunittestddt自动化框架 博文阅读密码验证 - 博客园 肖sir__python之模块configparser - xiaolehua - 博客园 c…

4G路由网关R10在智能制造生产线的应用

在当今智能制造的时代&#xff0c;高效稳定的网络连接和数据传输至关重要。4G 路由网关 R10 以其卓越的性能&#xff0c;在智能制造生产线中发挥着重要作用。 4G 路由网关 R10 是一款功能强大的网络设备。它支持多种网络连接方式&#xff0c;包括 4G 网络、有线网络等&#xff…

骨传导耳机哪个牌子好?五大高热度骨传导耳机测评推荐

随着科技的不断进步&#xff0c;耳机已经成为了我们日常生活中不可或缺的一部分。从传统的有线耳机到无线蓝牙耳机&#xff0c;再到现在的骨传导耳机&#xff0c;每一次技术的革新都给用户带来了全新的体验。骨传导耳机&#xff0c;作为一种新兴的耳机类型&#xff0c;它通过颅…

乐歌E5,E6系列升降桌质量如何?2024推荐必买的四款热销型号

在数字化时代&#xff0c;电脑桌成为了我们日常生活和工作中不可或缺的一部分。然而&#xff0c;长时间坐在固定高度的电脑桌前&#xff0c;不仅会影响我们的工作效率&#xff0c;还可能对身体健康造成不良影响。因此&#xff0c;一款能够电动升降的电脑桌显得尤为重要。 乐歌…

Linux-创建函数

基本的脚本函数 返回值 在函数中使用变量 数组变量和函数-向函数传递数组参数 数组变量和函数-从函数返回数组 函数递归 创建库 在命令行上使用函数-在命令行上创建函数 在命令行上使用函数-在.bashrc文件中定义函数

计算机组成的抽象以及相关技术

第1章 计算机抽象以及相关技术 最高端的服务器是超级计算机&#xff1a;几十万个处理器和太字节(terabyte)2的40次方的内存TB&#xff0c;成本数千万或数亿。通常写为1000000000000&#xff0c;万亿。 云计算接替了传统服务器称为仓储级计算机中心&#xff0c;可以实现Saas(软…

vue3的知识整理

1. vue3的生命周期 vue3的生命周期一般有2种形式写法&#xff0c;一种是基于vue2的options API的写法&#xff0c;一种是vue3特有的Composition API options API的生命周期 基本同vue2的生命周期基础&#xff0c;只是为了与生命周期beforeCreate和created对应&#xff0c;将bef…

餐企中场战事:高端网红退败,平价品牌向前

餐饮行业&#xff0c;风起云涌。人人都在讨论逆流与寒气的今天&#xff0c;品牌何以为战&#xff1f;步入平价时代&#xff0c;又该如何寻找制胜法宝&#xff1f; 01风浪越大&#xff0c;餐饮机会越多 如果把餐饮业的历史无限拉长&#xff0c;你会发现每个看似经济下行的节点…

Chromium 中前端HTMLDialogElement <Dialog> c++代码实现

一、HTMLDialogElement: open property Baseline Widely available The open property of the HTMLDialogElement interface is a boolean value reflecting the open HTML attribute, indicating whether the <dialog> is available for interaction. Value A boole…

CENTOS上的网络安全工具(三十)DPDK和HyperScan环境构建

一、预备知识 由于DPDK涉及到强CPU相关的优化策略&#xff0c;以及对网卡驱动栈的替换&#xff0c;所以在开始之前&#xff0c;首先需要垫补点CPU相关的概念&#xff0c;以及Linux上和网卡驱动相关的管理命令。 &#xff08;一&#xff09;CPU架构及相关概念 1. Socket、Core…

社交网络中的AI趋势:Facebook的创新探索

在数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的迅速发展正在深刻改变社交网络的面貌。作为全球最大的社交媒体平台之一&#xff0c;Facebook在AI领域的创新探索&#xff0c;不仅提升了用户体验&#xff0c;还推动了整个社交网络生态的演变。本文将深入探讨…