用户中心项目教程(四)---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.rhkb.cn/news/4178.html

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

相关文章

《自动驾驶与机器人中的SLAM技术》ch4:基于预积分和图优化的 GINS

前言:预积分图优化的结构 1 预积分的图优化顶点 这里使用 《自动驾驶与机器人中的SLAM技术》ch4:预积分学 中提到的散装的形式来实现预积分的顶点部分,所以每个状态被分为位姿()、速度、陀螺零偏、加计零偏四种顶点&am…

二叉搜索树(TreeMapTreeSet)

文章目录 1.概念2.二叉搜索树的底层代码实现(1)首先构建二叉树(2)实现插入功能;(3)实现查找(4)删除(重点) 3.TreeMap 1.概念 TreeMap&TreeSet都是有序的集合都是基于二叉搜索树来实现的 二叉搜索树:是一种特殊的二叉树 若左子…

【QT用户登录与界面跳转】

【QT用户登录与界面跳转】 1.前言2. 项目设置3.设计登录界面3.1 login.pro参数3.2 界面设置3.2.1 登录界面3.2.2 串口主界面 4. 实现登录逻辑5.串口界面6.测试功能7.总结 1.前言 在Qt应用程序开发中,实现用户登录及界面跳转功能是构建交互式应用的重要步骤之一。下…

基于springboot的口腔管理平台

作者:学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等 文末获取“源码数据库万字文档PPT”,支持远程部署调试、运行安装。 项目包含: 完整源码数据库功能演示视频万字文档PPT 项目编码&#xff1…

4 AXI USER IP

前言 使用AXI Interface封装IP,并使用AXI Interface实现对IP内部寄存器进行读写实现控制LED的demo,这个demo是非常必要的,因为在前面的笔记中基本都需哟PS端与PL端就行通信互相交互,在PL端可以通过中断的形式来告知PS端一些事情&…

实力认证 | 海云安入选《信创安全产品及服务购买决策参考》

近日,国内知名安全调研机构GoUpSec发布了2024年中国网络安全行业《信创安全产品及服务购买决策参考》,报告从产品特点、产品优势、成功案例、安全策略等维度对各厂商信创安全产品及服务进行调研了解。 海云安凭借AI大模型技术在信创安全领域中的创新应用…

二、点灯基础实验

嵌入式基础实验第一个就是点灯,地位相当于编程界的hello world。 如下为LED原理图,要让相应LED发光,需要给I/O口设置输出引脚,低电平,二极管才会导通 2.1 打开初始工程,编写代码 以下会实现BLINKY常亮&…

Amazon MSK 开启 Public 访问 SASL 配置的方法

1. 开启 MSK Public 1.1 配置 MSK 参数 进入 MSK 控制台页面,点击左侧菜单 Cluster configuration。选择已有配置,或者创建新配置。在配置中添加参数 allow.everyone.if.no.acl.foundfalse修改集群配置,选择到新添加的配置。 1.2 开启 Pu…

大模型UI:Gradio全解11——Chatbot:融合大模型的聊天机器人(4)

大模型UI:Gradio全解11——Chatbot:融合大模型的聊天机器人(4) 前言本篇摘要11. Chatbot:融合大模型的多模态聊天机器人11.4 使用Blocks创建自定义聊天机器人11.4.1 简单聊天机器人演示11.4.2 立即响应和流式传输11.4.…

流量分析复现(第十八届信息安全大赛 第二届长城杯 )

zeroshell_1 题目:从数据包中找出攻击者利用漏洞开展攻击的会话(攻击者执行了一条命令),写出该会话中设置的flag, 结果提交形式:flag{xxxxxxxxx} 这里大致的思路还是先看看,流量协议的分级 主要还是以TCP流…

ImportError: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32‘ not found

问题描述:安装MMYOLO或者MMROTATE时,出现的问题: (base) rootautodl-container-78fc438fda-4132d99a:~/autodl-tmp/MMROTATE_PROJECT/mmrotate-1.x# python demo/image_demo.py demo/demo.jpg oriented-rcnn-le90_r50_fpn_1x_dota.py orient…

2024年博客之星年度评选—创作影响力评审入围名单公布

2024年博客之星活动地址https://www.csdn.net/blogstar2024 TOP 300 榜单排名 用户昵称博客主页 身份 认证 评分 原创 博文 评分 平均 质量分评分 互动数据评分 总分排名三掌柜666三掌柜666-CSDN博客1001002001005001wkd_007wkd_007-CSDN博客1001002001005002栗筝ihttps:/…

25/1/15 嵌入式笔记 初学STM32F108

GPIO初始化函数 GPIO_Ini:初始化GPIO引脚的模式,速度和引脚号 GPIO_Init(GPIOA, &GPIO_InitStruct); // 初始化GPIOA的引脚0 GPIO输出控制函数 GPIO_SetBits:将指定的GPIO引脚设置为高电平 GPIO_SetBits(GPIOA, GPIO_Pin_0); // 将GPIO…

新星杯-ESP32智能硬件开发--ESP32的I/O组成-系统中断矩阵

本博文内容导读📕🎉🔥 ESP32开发板的中断矩阵、功能描述与实现、相关API和示例程序进行介绍 ESP32中断矩阵将任一外部中断源单独分配到每个CPU的任一外部中断上,提供了强大的灵活性,能适应不同的应用需求。 ESP32中断主…

游戏引擎学习第81天

仓库:https://gitee.com/mrxiao_com/2d_game_2 或许我们应该尝试在地面上添加一些绘图 在这段时间的工作中,讨论了如何改进地面渲染的问题。虽然之前并没有专注于渲染部分,因为当时主要的工作重心不在这里,但在实现过程中,发现地…

【2024年华为OD机试】(C卷,100分)- 悄悄话 (Java JS PythonC/C++)

一、问题描述 题目描述 给定一个二叉树,每个节点上站一个人,节点数字表示父节点到该节点传递悄悄话需要花费的时间。 初始时,根节点所在位置的人有一个悄悄话想要传递给其他人,求二叉树所有节点上的人都接收到悄悄话花费的时间…

【Spring Boot】掌握 Spring 事务:隔离级别与传播机制解读与应用

前言 🌟🌟本期讲解关于spring 事务传播机制介绍~~~ 🌈感兴趣的小伙伴看一看小编主页:GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 🎆那么废话…

【陕西省乡镇界】面图层shp格式arcgis数据乡镇名称和编码2020年wgs84坐标无偏移内容测评

标题中的“陕西省乡镇界面图层shp格式arcgis数据乡镇名称和编码2020年wgs84坐标无偏移.zip”表明这是一个地理信息系统(GIS)的数据集,专为陕西省的乡镇区域设计。该数据集以Shapefile(shp)格式提供,是GIS领…

国家统计局湖北调查总队副总队长张小青一行调研珈和科技农业遥感调查智能化算法

1月15日上午,国家统计局湖北调查总队党组成员、副总队长张小青一行莅临珈和科技开展调研。调研期间,张小青一行实地了解了珈和科技在自动化作物分布提取技术领域的最新成果,深入探讨了作物自动化处理模型在农业调查上应用的创新价值及优化方向…

-bash: /java: cannot execute binary file

在linux安装jdk报错 -bash: /java: cannot execute binary file 原因是jdk安装包和linux的不一致 程序员的面试宝典,一个免费的刷题平台