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

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.rhkb.cn/news/424134.html

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

相关文章

十四、centos7 yum报错:cannot find a valid baseurl for repo:base/7/x86_64的解决方案

🌻🌻目录🌻🌻 一、 centos7 yum报错:cannot find a valid baseurl for repo:base/7/x86_64二、分析错误三、解决方案3.1 检查网络连接3.2 检查DNS设置3.3 检查YUM仓库配置3.3.1 使用官方CentOS镜像配置3.3.2 使用阿里云…

【ArcGISProSDK】初识

ArcGIS Pro SDK 提供四种主要的可扩展性模式:加载项、托管配置、插件数据源和 CoreHost 应用程序。 各模块文件对比 API 核心 核心程序集位于 {ArcGIS Pro 安装文件夹}\bin 中。 程序集描述ArcGIS.Core.dll 提供 CIM、地理数据库、几何图形和公共设施网络 API。 …

JFLASH添加支持PY32F002芯片的方法

嵌入式及电子工程师、爱好者必备工具 0.91寸OLED屏幕大小的音频频谱,炫酷! 0.96寸OLED控制器SSD1306其他两种显示模式 CX32l003 点亮0.96寸OLED屏幕 0.96寸OLED屏幕控制器SSD1306详解 JLINK无法烧写程序,原因让人意外 Luat开发板的烧写 …

计算机毕业设计Python知识图谱美团美食推荐系统 美团餐厅推荐系统 美团推荐系统 美食价格预测 美团爬虫 美食数据分析 美食可视化大屏

《Python知识图谱美团美食推荐系统》开题报告 一、研究背景与意义 随着信息技术的飞速发展和互联网应用的普及,人们的消费习惯逐渐从线下转移到线上,外卖行业迎来了前所未有的发展机遇。美团作为国内领先的生活服务电子商务平台,拥有庞大的…

Kafka 基于SASL/SCRAM动态认证部署,kafka加账号密码登录部署

文章目录 前言下载 kafka安装启动zookeeper添加账号密码 启动kafka修改kafka配置文件增加jaas授权文件修改启动文件,启动kafka检查是否部署成功 offset explore 连接 前言 其实挺简单的几个配置文件,问大模型一直没说到点上,绕晕了。SASL/SC…

ardunio超声波测距实验

工作原理 模块有2个超声波换能器(如图所示),一个发出声波,另一个接收物体反射回来的声波,这中间所经过的时间即声波传播的时间,再结合声速就能计算出: 距离 声速 * 时间 2 如何使用HC-SR04模块…

域控操作十七点五:域用户无管理员权限下安装IT打包的软件

1,需要软件Runasspcadmin三件套和winrar压缩软件 2,将需要打包的软件放进这个文件夹内,使用播放器举个例子 3,打开runasspcadmin.exe 按图片写就行了 文件夹现在是这样的然后全选右击,用WinRAR添加到压缩包 这个可以自…

【LabVIEW学习篇 - 24】:生产者/消费者设计模式

文章目录 生产者/消费者设计模式案例:控制LED等亮灭 生产者/消费者设计模式 生产者/消费者是多线程编程中最基本的一种模式,使用非常普遍。从软件角度看,生产者就是数据的提供方,而消费者就是数据的消费处理方,二者之…

【Unity】在Unity 3D中使用Spine开发2D动画

文章目录 内容概括前言下载安装 Spine Pro导入Unity插件Spine动画导入Unity使用展现动画效果展现 内容概括 本文主要讲解 Spine Pro 免(破)费(解)版的安装,以及如何将动画导入到Unity中使用。 前言 通常要用 Spine …

基于less和scss 循环生成css

效果 一、less代码 复制代码 item-count: 12; // 生成多少个 .item 类.item-loop(n) when (n > 0) {.icon{n} {background: url(../../assets/images/menu/icon{n}.png) no-repeat;background-size: 100% 100%;}.item-loop(n - 1);}.item-loop(item-count);二、scss代码 f…

Oracle EBS AP预付款行分配行剩余预付金额数据修复

系统环境 RDBMS : 12.1.0.2.0 Oracle Applications : 12.2.6 问题情况 AP预付款已验证和自动审批但是未过账已经AP付款但是又撤消付款并且未过账问题症状 AP预付款暂挂: AP预付款行金额(等于发票金额)与分配行金额不相等: 取消AP预付款提示如下:

Spark处理结构化数据:DataFrame、DataSet、SparkSQL

Spark处理结构化数据:DataFrame、DataSet、SparkSQL 1. DataFrame: 表示分布式数据集合,以表格的形式存储数据,具有行和列。 支持丰富的操作和转换(如过滤、选择、聚合等)。 提供了对数据的高级抽象,简化了…

Linux:五种IO模型

1:五种IO模型 1:阻塞IO 阻塞IO: 在内核将数据准备好之前,系统调用会一直等待.所有的套接字,默认 都是阻塞方式。 2:非阻塞 IO 非阻塞 IO: 如果内核还未将数据准备好, 系统调用仍然会直接返回, 并且返回EWOULDBLOCK 错误码。 非阻塞 IO 往往需…

通过覆写 url_for 将 flask 应用部署到子目录下

0. 缘起 最近用 flask 写了一个 web 应用,需要部署到服务器上。而服务器主域名已经被使用了,只能给主域名加个子目录进行部署,比如主域名 example.org ,我需要在 example.org/flask 下部署。这时 flask 应用里的内部连接们就出现…

基于UDP的简易网络通信程序

目录 0.前言 1.前置知识 网络通信的大致流程 IP地址 端口号(port) 客户端如何得知服务器端的IP地址和端口号? 服务器端如何得知客户端的IP地址和端口号? 2.实现代码 代码模块的设计 服务器端代码 成员说明 成员实现 U…

树莓派交叉编译

目录 一、交叉编译的认知 1.1 本地编译: 1.2 交叉编译是什么: 1.3 为什么要交叉编译: 1.4 什么是宿主机?什么是目标机? 1.5 如何进行交叉编译: 二、交叉编译工具链的安装 2.1 下载交叉编译工具&…

数据中台与数据飞轮:如何结合两者优势推动企业数据驱动转型?

一、数据时代的双轨列车 在回答这个问题之前,我们可以借用交通系统来形容一下数据中台和数据飞轮。数据中台是一种集成企业内外各类数据资源,通过标准化处理、存储和分析,为前台业务提供高效数据服务支持的技术和管理体系。而数据飞轮则强调…

MySQL权限控制(DCL)

我的mysql里面的一些数据库和一些表 基本语法 1.查询权限 show grants for 用户名主机名;例子1:查询权限 show grants for heima%;2.授予权限 grant 权限列表 on 数据库名.表名 to 用户名主机名;例子2: 授予权限 grant all on itcast.* to heima%;…

Humanize AI 简介

Humanize AI 简介 Humanize AI 官方首页截图 文章目录 Humanize AI 简介1 Humanize AI 是什么2 Humanize AI 能做什么3 Humanize AI 怎么用4 Humanize AI 怎么收费5 结论 1 Humanize AI 是什么 数字时代的当下,AI 人工智能已成为内容创作不可或缺的一部分。从生成文…

第T8周:猫狗识别

本文为365天深度学习训练营 中的学习记录博客原作者:K同学啊 ●难度:夯实基础⭐⭐ ●语言:Python3、TensorFlow2 要求: 1.了解model.train_on_batch()并运用 2.了解tqdm,并使用tqdm实现可视化进度条 拔高&#xff08…