快速搭建最简单的前端项目vue+View UI Plus

news2024/9/26 16:40:41

1 引言

‌‌Vue是一套用于构建Web前端界面的渐进式JavaScript框架。‌‌它以其易学易用、性能出色、灵活多变而深受开发者喜爱,并且与其他前端框架(如‌React和‌Angular)相比,在国内市场上受到了广泛的认可和使用。点击进入官方网站。
View UI Plus 是 View Design 设计体系中基于 Vue.js 3 的一套 UI 组件库,主要用于企业级中后台系统。提供了超过 80 个常用底层组件(如 Button、Input、DatePicker等)及业务组件(如 City、Auth、Login 等)。点击进入官方网站。

2 安装Visual Studio Code

Visual Studio Code是前端常用的开发工具,下载地址,下载后根据引导程序安装即可。
在这里插入图片描述

3 安装node.js

Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。下载地址,下载后根据引导程序安装即可。
在这里插入图片描述安装完成后,打开CMD命令行,输入node -v和npm -v,若显示版本则安装成功。
在这里插入图片描述

4 下载vue项目

View UI Plus提供了基础工程,以此为基础开发,可以省去大量配置和调试环境的时间。点击进入 下载页面,下载后解压到任意位置。由于github有时打不开,可以点击CSDN站内下载,我特意上传了一个。
在这里插入图片描述
在这里插入图片描述

5 导入vue项目

打开Visual Studio Code,依次点击File>>Add Folder to Workspace…,然后选择解压后的文件夹,点击确认项目就导入成功了。
在这里插入图片描述

6 启动项目

6.1. 在项目上右键点击Open in Integrated Terminal,弹出命令行。, 6.2. 打开README.md,查看启动步骤。
在这里插入图片描述6.3. 命令行输入npm install,下载资源,等待下载完成。

  • 如果npm下载太慢,可以修改npm默认下载地址为国内淘宝的npm镜像服务器。在命令行输入npm config set registry https://registry.npmmirror.com/即可,然后关闭Visual Studio Code,重新打开执行npm install。

在这里插入图片描述

6.4. 命令行输入npm run serve,启动项目,等待启动完成。
在这里插入图片描述6.5. 访问:http://localhost:8080/,如下图,项目启动成功。
在这里插入图片描述

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

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

相关文章

【线程池】Java 线程池 ThreadPoolExecutor 类源码介绍

文章目录 前言线程池是什么线程池解决了哪些问题本文主要讲述什么感谢读者 线程池 UML 类图ThreadPoolExecutor 内部设计核心参数内部类任务队列拒绝策略 ThreadPoolExecutor 源码线程池生命周期线程池构造函数execute() 【提交任务】addWorker() 方法 【添加工作线程并启动】了…

【微服务】⭐️华为云obs功能抽取到公共服务,供所有项目使用

目录 🍸前言 🍻一、公共服务搭建 🍺二、代码实现 1.工具类编写 2.项目引入使用 🍹三、章末 🍸前言 小伙伴们大家好,上次讲了如何本地对接华为云Obs对象存储服务,在本地项目中通过sdk引入调用…

【QT】常用控件-下

欢迎来到Cefler的博客😁 🕌博客主页:折纸花满衣 🏠个人专栏:QT 目录 👉🏻QComboBox👉🏻 QSpinBox👉🏻QDateTimeEdit👉🏻QD…

时序预测 | MATLAB实现BKA-XGBoost(黑翅鸢优化算法优化极限梯度提升树)时间序列预测

时序预测 | MATLAB实现BKA-XGBoost(黑翅鸢优化算法优化极限梯度提升树)时间序列预测 目录 时序预测 | MATLAB实现BKA-XGBoost(黑翅鸢优化算法优化极限梯度提升树)时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 Matlab实现BKA-XGBoost时间序列预测&a…

datasophon升级海豚调度dolphinscheduler为3.2.2

一、参考博主升级3.2.1文章:datasophon升级海豚调度为3.2.1_海豚调度3.2.2 mysql包找不到-CSDN博客 二、升级后woker-server启动报错如下: 原因是worker-server下conf/common.properties中的:resource.storage.typeNONE, 解决很简…

如何划分类/单一职权原则SRP

参考:单一职责 -- 每个类只负责一个功能_每个类应该只负责一个功能,遵循单一职责原则。-CSDN博客 类有且只有一个原因需要修改它,这样的才是一个结构简洁的类。 结合上面的例子,需要注意的点: 1.比如搜索数据库,需要…

Procdump抓ToDesk密码

目录 前言 1.工具教程 2.转储数据 3.密码获取 4.总结 前言 本文是因为在公众号上看到一篇文章随想着实战中利用ToDesk秀操作失败后,实验环境成功复现后写下。ProcDump[1] 是一个命令行实用工具,其主要用途是监视应用程序的 CPU 峰值,并在…

mybatis 查询Not Found TableInfoCache

近期在工程迁移中遇到一个mybatis查询的问题,检查代码没有问题,但是报Not Found TableInfoCache 解决过程 是不是数据库对应表错误或者实体类指定的表名错误 查看配置文件链接的数据源是否正确TableName中指定的表名然后去数据库看一下是否存在 如果…

象过河仓库管理软件,轻松实现无纸化录入,自动化记账

在如今快速发展的商业环境中,仓库管理面临着手工记账效率低下,容易引发数据不准确,滞后,错漏频发,盘点耗时费力等问题。为了解决这些问题,象过河仓库管理软件应运而生,轻松实现无纸化录入&#…

支付环节攻击方式与漏洞类型

支付环节攻击方式与漏洞类型 1.概述2.卡复制3.卡数据破解与篡改4.网络欺骗攻击5.线下欺骗攻击6.支付身份伪造7.支付逻辑绕过8.数据不同步9.支付数据篡改10.条件竞争漏洞(并发)11.拒绝服务 参考自:https://www.topsec.com.cn/uploads/2023-10-…

希捷,AI时代的存储“破壁者”

喜欢跑步或者经常看马拉松等比赛的读者知道,当选手经过专业训练成绩突飞猛进后,就会有一段时间停滞不前。这个阻碍可能是物理的、心理的或是技术的障碍,只有突破这个“壁垒”,才能成为更好的自己。 对于一家企业来说,…

100.WEB渗透测试-信息收集-网络空间搜索引擎shodan(2)

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于: 易锦网校会员专享课 上一个内容:99.WEB渗透测试-信息收集-网络空间搜索引擎shodan(1)-CSDN博客 Sh…

读论文-《基于计算机视觉的工业金属表面缺陷检测综述》

文章目录 1. 背景1.1 工业需求1.2 传统方法的局限1.3 计算机视觉技术的优势 2. 技术流程2.1 光学成像2.1.1照明方式2.1.2 缺陷和背景特性 2.2 图像预处理2.3 缺陷检测2.4 结果分析和决策 3. 关键算法3.1 光学成像技术相关算法3.2 图像预处理相关算法3.2.1 图像增强3.2.2特征提取…

wakenet尾迹

1、数据集介绍SWIM_Dataset_1.0.0 1.1标注文件介绍 标注文件介绍&#xff0c; 第一种&#xff1a;角度和框的坐标 <annotation><folder>Positive</folder><filename>00001</filename>文件名字<format>jpg</format>图片后缀<s…

太速科技-基于XC7Z100+AD9361的双收双发无线电射频板卡

基于XC7Z100AD9361的双收双发无线电射频板卡 一、板卡概述 基于XC7Z100AD9361的双收双发无线电射频板卡是基于Xilinx ZYNQ FPGA和ADI的无线收发芯片AD9361开发的专用功能板卡&#xff0c;用于4G小基站&#xff0c;无线图传&#xff0c;数据收发等领域。 二、板卡…

[产品管理-8]:NPDP新产品开发 - 6 - 商业画布、商业模式、创新模式

目录 一、商业画布&#xff1a;九个核心部件 二、商业模式 三、创新模式 3.1 什么是创新 1、传统与创新模式的对比 2、创新模式的具体类型 3、企业创新模式的分类 4、总结 3.2 创新模式 1. 已知领域 2. 未知领域 一、商业画布&#xff1a;九个核心部件 商业画布&…

【C语言】选择排序及优化、冒泡排序、计数排序的实现

目录 一、选择排序1.1 常规版&#xff08;一次排好一个数&#xff09;1.1.1 基本思想1.1.2 实现思路1.1.3 代码 1.2 优化版&#xff08;一次排好两个数&#xff09;1.2.1 实现思路1.2.2 代码 1.3 时间复杂度 二、冒泡排序2.1 实现思路2.2 代码2.3 时间复杂度 三、计数排序3.1 基…

DroidBot-GPT: GPT-powered UI Automation for Android论文学习

本文介绍了DroidBot GPT&#xff0c;这是一种利用类似GPT的大型语言模型&#xff08;LLM&#xff09;自动化与Android移动应用程序交互的工具。给定所需任务的自然语言描述&#xff0c;DroidBot GPT可以自动生成并执行导航应用程序以完成任务的操作。它的工作原理是将应用程序G…

99.游戏安全项目-可见数据的搜索与技巧

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;易道云信息技术研究院 上一个内容&#xff1a;98.游戏的启动与多开-分析与实现多开器 下图中红框位置显示的数据&#xff0c;只有下图…

Avaloia 实现国产麒麟系统中文显示界面

最近在搞一个国产麒麟系统的接口对接&#xff0c;因为&#xff0c;接口内含复杂的签名验证&#xff0c;而且还是离线环境&#xff0c;所以&#xff0c;postman不是很好用。 就想着哪个方式好一些&#xff0c;主要是有选择图片的操作&#xff0c;所以&#xff0c;在Electron和A…