Vue入门教学——编写第一个页面

  • 以Vue2.0为例子。

1、创建一个Vue项目

  • 创建过程:Vue-cli(脚手架)的创建_vue脚手架创建项目命令-CSDN博客
  • 【注】项目名不能有大写字母。
  • 创建完毕后,使用VSCode打开项目文件夹(其他编辑器也行)。

2、运行项目

  • 进入项目文件夹,执行运行命令。
  • cd demo
    npm run serve
  • 按住Ctrl,鼠标左键点击即可打开。

3、编写第一个页面

  • 从App.vue和路由中可以看出,原始的系统中一共有两个页面。
  • 为了简便,直接把Home当作要编写的第一个页面。
  • 首先删除About页面相关的信息。
    •  
  • 再修改App.vue中的信息。
  • 接下来,修改Home页面。
    • 从下面代码可以看出,Home页面调用了一个HelloWord组件。该组件存放在components中。
    •  
    • 可以通过向Home页面中添加组件来调整页面布局。
  • 接下来进行简单演示,创建一个新的组件插入HomeView.vue中。
    • 先删除HelloWord组件的相关信息。
    • 在components下创建一个新的组件文件。
      • HomeTitle.vue
      • <template><div id="hometitle"><p>编写第一个主页</p></div>
        </template>
        <script>export default {name:'HomeTitle',};
        </script><style scoped>#hometitle p{font-size:50px;font-weight:bold;}
        </style>
    • 将HomeTitle组件引入到Home主页中。
    • 保存即可。
  • 修改头部信息。
    • 项目的头部信息都存放在public文件夹的index.html中,按需修改即可。

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

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

相关文章

震裕科技-300953 三季报分析(20231108)

震裕科技-300953 基本情况 公司名称&#xff1a;宁波震裕科技股份有限公司 A股简称&#xff1a;震裕科技 成立日期&#xff1a;1994-10-18 上市日期&#xff1a;2021-03-18 所属行业&#xff1a;专用设备制造业 周期性&#xff1a;0 主营业务&#xff1a;精密级进冲压模具及下游…

【C语言 | 预处理】C语言预处理详解(二) —— #pragma指令介绍以及内存对齐、结构体大小

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

vite + electron引入itk报错

代码 import { readImageArrayBuffer } from itk-wasm console.log(readImageArrayBuffer)通过itk-wasm官网&#xff0c;创建新的项目vitevue&#xff08;vue2或者vue3&#xff09;&#xff0c;都没问题。加入electeon后包此错。通过排查&#xff0c;意外找到原因&#xff0c;…

直面LED Driver测试挑战,助力显示屏行业变中求变!

杭州亚运会开幕式惊艳世界&#xff0c;引发社会各界一致赞誉&#xff01;在大气浪漫的舞台效果中&#xff0c;LED屏、裸眼3D屏凭借“硬核科技”出圈&#xff0c;为大家带来科技、活力、诗意的“中国式浪漫”观赏体验。而这美轮美奂的LED呈现效果背后&#xff0c;主要依靠的是LE…

企业安全—三保一评

0x00 前言 本篇主要是讲解三保一评的基础知识&#xff0c;以及对为什么要进行这些内容的原因进行总结。 0x01 整体 1.概述 三保分别是&#xff0c;分保&#xff0c;等保&#xff0c;关保。 分保就是指涉密信息系统的建设使用单位根据分级保护管理办法和有关标准&#xff0c…

修改Android Studio默认的gradle目录

今天看了一下&#xff0c;gradle在C盘占用了40多G。我C盘是做GHOST的&#xff0c;放在这里不方便。所以就要修改。 新建目录名&#xff08;似乎无必要&#xff09; ANDROID_SDK_HOMEG:\SOFTWARES\android-sdk GRADLE_USER_HOMEG:\SOFTWARES\.gradle 修改目录 File->Setti…

【Cocos新手进阶】父级预制体中的数据列表,在子预制体中的控制方法!

本篇文章主要讲解&#xff0c;cocos中在预制体操作过程中&#xff0c;父级预制体生成的数据列表中&#xff0c;绑定了子预制体中的事件&#xff0c;在子预制体的时间中如何控制上级列表的具体操作教程。 日期&#xff1a;2023年11月10日 作者&#xff1a;任聪聪 一、实际效果情…

springcloud二手交易平台系统源码

开发技术&#xff1a; 大等于jdk1.8&#xff0c;大于mysql5.5&#xff0c;idea&#xff08;eclipse&#xff09;&#xff0c;nodejs&#xff0c;vscode&#xff08;webstorm&#xff09; springcloud springboot mybatis vue elementui mysql 功能介绍&#xff1a; 用户端&…

openvino学习(一)ubuntu20.04安装openvino2022

安装openvino2022要求 操作系统 Ubuntu 18.04 长期支持 (LTS)&#xff0c;64 位 Ubuntu 20.04 长期支持 (LTS)&#xff0c;64 位 软件 CMake 3.13 或更高版本&#xff0c;64 位 GCC 7.5.0&#xff08;适用于 Ubuntu 18.04&#xff09;或 GCC 9.3.0&#xff08;适用于 Ubunt…

人车实时精准管控!北斗让换流站作业更安全

换流站是高压直流输电系统的核心组成部分&#xff0c;对促进电网稳定运行、保障电力行业的可持续发展有着重要作用。长期以来&#xff0c;随着电网主变改扩建设工程的开展&#xff0c;站内作业人员安全管控压力随之增大&#xff0c;仅依靠传统的“人盯人”和“自主”管控模式较…

掌握互联网的未来:5G时代的新机遇

随着5G技术的快速发展&#xff0c;我们正步入一个全新的互联网时代。5G不仅仅是速度的飞跃&#xff0c;它还代表着无限的可能性和前所未有的创新机遇。本文将探讨5G如何重新定义互联网&#xff0c;并为您提供洞察如何抓住这波科技浪潮。 5G技术的核心优势 超高速度&#xff1a…

火力全开!腾讯云这次直接开卖5年

如果你是一名网站管理员&#xff0c;或者是一名创业公司的CEO&#xff0c;那么腾讯云这个词一定不会陌生。作为国内领先的云计算服务提供商&#xff0c;腾讯云一直以来都在为各行各业的用户提供着高效、稳定、安全的云计算服务。 而在今天&#xff0c;我们要给大家带来一个重磅…

视频剪辑方法:为视频剪辑添加亮点,如何制作精美的滚动字幕

在视频剪辑中&#xff0c;滚动字幕是一个重要的元素&#xff0c;它可以为视频增添视觉吸引力&#xff0c;增强观看体验。滚动字幕的长度和速度也是非常重要的因素。如果滚动字幕太长&#xff0c;会让人感到拖沓&#xff1b;如果滚动字幕太短&#xff0c;会让人感到匆忙。因此&a…

“探秘!根据关键词搜索商品列表的虾皮API大揭露!“

要使用虾皮API根据关键词获取商品列表&#xff0c;您需要使用虾皮API的搜索功能。以下是使用Python和虾皮API根据关键词获取商品列表的基本步骤&#xff1a; 注册虾皮API账号并获取API凭证&#xff08;访问虾皮开放平台并创建应用以获取API凭证&#xff09;。安装必要的Python…

6、规划绩效域

1、变更 &#xff08;1&#xff09;变更有哪几种原因&#xff08;类型&#xff09;&#xff1f; 纠正措施&#xff08;比如进度落后了&#xff0c;我们会有赶工和快速跟进的措施&#xff09; 缺陷补救 预防措施 更新措施 2、变更的目的和变更控制流程的意义 考点1&#…

软文发布如何选择对应的媒体

企业做软文推广第一步&#xff0c;就是选择合适的媒体进行投放&#xff0c;然而许多企业不知道如何选择合适的媒体导致推广工作十分被动&#xff0c;无法取得效果&#xff0c;今天媒介盒子就来和大家分享&#xff0c;企业应该如何选择对应的媒体。 一、 媒体类型 根据软文类型…

力扣每日一道系列 --- LeetCode 88. 合并两个有序数组

&#x1f4f7; 江池俊&#xff1a; 个人主页 &#x1f525;个人专栏&#xff1a; ✅数据结构探索 ✅LeetCode每日一道 &#x1f305; 有航道的人&#xff0c;再渺小也不会迷途。 文章目录 思路1&#xff1a;暴力求解思路2&#xff1a;原地合并 LeetCode 88. 合并两个有序数组…

在vue中如果头像为空时用姓名第一个字当头像

业务场景:当个人资料或者用户头像没有图片时&#xff0c;默认使用户名字中第一个汉字做头像。 效果图&#xff1a; 完整代码&#xff1a; <el-avatarsize"large" style"width: 45px; height: 45px; line-height: 45px; font-size: 24px"v-if"…

酷开科技智能大屏OS Coolita亮相第134届中国进出口商品交易会

作为中国外贸的“风向标”和“晴雨表”&#xff0c;广交会因其历史长、规模大、商品种类全、到会客商多、成交效果好&#xff0c;被称为“中国第一展”&#xff0c;它见证了中国改革开放的时代大潮与对外贸易的蓬勃发展。 2023年10月15日&#xff0c;第134届中国进出口商品交易…

财税服务展示预约小程序的作用是什么

财税财政往往困扰着很多公司&#xff0c;尤其是公司里没有相应职员或工作压力大的情况下&#xff0c;不少商家就会寻找代理记账、审计服务、会计代理等服务的机构。 对财政服务代理机构&#xff08;会计公司&#xff09;来说&#xff0c;市场企业多而广&#xff0c;理论上来说…