用户中心项目教程(四)---Vue脚手架完成前端初始化

目录

1.项目的创建

2.使用开发工具打开

3.项目运行方法

4.使用按钮组件

5.全局注册

6.如何进行组件的测试

7.使用组件的效果展示

8.关于这个vue项目内容的说明


1.项目的创建

这个前提你是你完成了我的教程(三)里面的相关配置,不然你可以无法直接走到这一步,因为某些原因,我们还是需要在这个vue create 前加上这个npx限制,这个create后面的这个名字就是我们开发者随便取的,不一定要和我的一样,这个就是我们的项目的名字罢了;

实际上,这个官网里面,也有这个对应的说明,供我们进行参考:

2.使用开发工具打开

推荐使用webstorm打开这个我们初始化之后的内容,找到我们放的位置,打开即可

3.项目运行方法

点击下面的这个位置,就可以运行起来了:

4.使用按钮组件

这个组件是在我们的这个页面的下图的这个位置上面:

我使用的是一个按钮的组件,直接在这个搜索框里面搜索这个按钮就可以了;

接下来就是去获取这个对应的代码:这个代码获取的时候不可以全部复制,我的这个经验就是复制这个里面的部分内容就可以看到这个效果;

5.全局注册

就是我们的文档里面的这个部分对应的代码直接cv即可;

cv之后放到下面的这个位置:main.js文件里面去,但是这个全局注册里面的代码和我们的现有的脚手架里面的代码是存在重复的,因此这个需要我们进行调整,调整之后的情况就是下面的这个情况;

6.如何进行组件的测试

这个就是我们把第四步里面的复制的代码cv到我们的这个vue问价里面去,我是选择了这个第四步里面的代码的一部分放进来的;

然后还是按照原来的方法,运行起来这个项目---运行的是我们的package.json里面的这个server这个内容;

7.使用组件的效果展示

下面的这个右下角就可以看到我们的这个组件的效果,说明上面的操作是没有问题的;

8.关于这个vue项目内容的说明

下面的这个就是相当于我们的css,用来进行这个全局的配置:

下面的这个是我后来运行时候报错,在网上找的这个教程里面的方法,我自己添加的,不是原来就有的,但是这个方法确实是行之有效的:

下面的这个部分的内容也是因为报错,我添加的这个设置,根据自己的实际情况百度处理即可;

我们把相关的组件的代码(来自于这个ant design的),直接放到我们的这个目录下面就可以了:还是点击这个server(package.json)里面的按钮进行运行启动;

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

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

相关文章

【GitHub】登录时的2FA验证

一、如何进行2FA认证 1.在你的浏览器中下载 Authenticator身份验证插件 2.使用身份验证器添加凭证 2.1 使用身份验证器扫描验证二维码 选择扫描二维码

目标跟踪算法发展简史

单目标跟踪(Single Object Tracking,SOT)是计算机视觉领域中的一个重要研究方向,旨在在视频序列中持续定位并跟踪一个特定目标。随着计算机视觉和机器学习技术的飞速发展,单目标跟踪算法经历了从经典方法到深度学习的演…

Flink 使用 Kafka 作为数据源时遇到了偏移量提交失败的问题

具体的错误日志 21:43:57.069 [Kafka Fetcher for Source: Custom Source -> Map -> Filter (1/1)#2] ERROR org.apache.kafka.clients.consumer.internals.ConsumerCoordinator - [Consumer clientIdconsumer-my-group-6, groupIdmy-group] Offset commit failed on pa…

【Java设计模式-7】责任链模式:我是流水线的一员

一、责任链(Chain of Responsibility Patten)模式是个啥? 想象一下,你要请假。你先把请假申请交给了小组长,小组长一看,这事儿他能决定,就直接批了。要是小组长觉得这事儿得往上汇报&#xff0…

面试-字符串1

应用 第1个字符串:R 第2个字符串:BR 第3个字符串:RBBR 第4个字符串:BRRBRBBR 规律:第i个字符串 第i-1个字符串取反 第i-1个字符串,其中B、R互为相反字符。求第n个字符串的第k个字符为多少?n从…

C# 通用缓存类开发:开启高效编程之门

引言 嘿,各位 C# 开发者们!在当今快节奏的软件开发领域,提升应用程序的性能就如同给跑车装上涡轮增压,能让你的项目在激烈的竞争中脱颖而出。而构建一个高效的 C# 通用缓存类,无疑是实现这一目标的强大武器。 想象一…

QT调用OpenSceneGraph

OSG和osgQt编译教程,实测通过 一、下载OpenSceneGraph OpenSceneGraphhttps://github.com/openscenegraph/OpenSceneGraph 二、使用CMAKE编译OpenSceneGraph 1.打开cmake,配置源代码目录 2. CMAKE_INSTALL_PREFIX设置为install文件夹,生…

人工智能领域单词:英文解释

目录 1、前言2、单词组1:15个3、单词组2:15个4、单词组3:15个5、单词组4:15个6、单词组5:15个 1、前言 亲爱的家人们,创作很不容易,若对您有帮助的话,请点赞收藏加关注哦&#xff0…

数据结构与算法面试专题——引入及归并排序

数据结构与算法引入 我们都知道数据结构与算法很重要,甚至会将其称为程序员的“内功”,但是我们花了很多时间学的算法和数据结构,好像就只是为了应对算法面试,对日常的开发工作没有什么帮助。 这点对于我们数据工程师来说&#…

《鸿蒙 HarmonyOS 应用开发从入门到精通(第 2 版)》学习笔记 ——HarmonyOS 环境搭建之安装DevEco Studio

作为一款开发工具,除了具有基本的代码开发、编译构建及调测等功能外,DevEco Studio还具有如下特点: 高效智能代码编辑:支持Java、XML、ArkTS、JS、C/C等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、…

电脑办公技巧之如何在 Word 文档中添加文字或图片水印

Microsoft Word是全球最广泛使用的文字处理软件之一,它为用户提供了丰富的编辑功能来美化和保护文档。其中,“水印”是一种特别有用的功能,它可以用于标识文档状态(如“草稿”或“机密”)、公司标志或是版权信息等。本…

学习记录之原型,原型链

构造函数创建对象 Person和普通函数没有区别,之所以是构造函数在于它是通过new关键字调用的,p就是通过构造函数Person创建的实列对象 function Person(age, name) {this.age age;this.name name;}let p new Person(18, 张三);prototype prototype n…

logback日志自定义占位符

前言 在大型系统运维中,很大程度上是需要依赖日志的。在java大型web工程中,一般都会使用slf4jlogback这一个组合来实现日志的管理。 logback中很多现成的占位符可以可以直接使用,比如线程号【%t】、时间【%d】、日志等级【%p】,…

Android系统开发(八):从麦克风到扬声器,音频HAL框架的奇妙之旅

引言:音浪太强,我稳如老 HAL! 如果有一天你的耳机里传来的不是《咱们屯里人》,而是金属碰撞般的杂音,那你可能已经感受到了 Android 音频硬件抽象层 (HAL) 出问题的后果!在 Android 音频架构中&#xff0c…

Spring Boot + Netty + WebSocket 实现消息推送

1、关于Netty Netty 是一个利用 Java 的高级网络的能力&#xff0c;隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架。 2、Maven依赖 <dependencies><!-- https://mvnrepository.com/artifact/io.netty/netty-all --><dependency><gr…

数据恢复常用方法(三)如何辨别固态硬盘故障类型

数据恢复首先需要辨别固态硬盘故障类型&#xff0c;只有先确认故障类型&#xff0c;才能进行下一步动作 如下是一种常见的场景&#xff0c;固态硬盘无法识别&#xff0c;接入电源与数据线&#xff0c;电脑的磁盘管理不显示任何信息。 第一步&#xff1a;确认硬件状态&#xff…

【大数据】机器学习----------强化学习机器学习阶段尾声

一、强化学习的基本概念 注&#xff1a; 圈图与折线图引用知乎博主斜杠青年 1. 任务与奖赏 任务&#xff1a;强化学习的目标是让智能体&#xff08;agent&#xff09;在一个环境&#xff08;environment&#xff09;中采取一系列行动&#xff08;actions&#xff09;以完成一个…

StarRocks 3.4 发布--AI 场景新支点,Lakehouse 能力再升级

自 StarRocks 3.0 起&#xff0c;社区明确了以 Lakehouse 为核心的发展方向。Lakehouse 的价值在于融合数据湖与数据仓库的优势&#xff0c;能有效应对大数据量增长带来的存储成本压力&#xff0c;做到 single source of truth 的同时继续拥有极速的查询性能&#xff0c;同时也…

Swift语言的函数实现

Swift语言函数实现详解 引言 Swift是一种强类型、泛型编程的现代编程语言&#xff0c;广泛应用于iOS和macOS开发。函数是Swift编程中的基本构建块之一&#xff0c;通过函数可以将代码进行模块化&#xff0c;实现重用性和可读性。本篇文章将系统地介绍Swift中的函数&#xff0…

【技巧】优雅的使用 pnpm+Monorepo 单体仓库构建一个高效、灵活的多项目架构

单体仓库&#xff08;Monorepo&#xff09;搭建指南&#xff1a;从零开始 单体仓库&#xff08;Monorepo&#xff09;是一种将多个相关项目集中管理在一个仓库中的开发模式。它可以帮助开发者共享代码、统一配置&#xff0c;并简化依赖管理。本文将通过实际代码示例&#xff0…