快速搭建最简单的前端项目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.mzph.cn/diannao/53988.shtml

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

相关文章

vue3嵌套路由无法显示子路由组件的解决方法

路由嵌套的问题: vue3前端开发中,在使用嵌套路由来设计二级目录或多级目录后,使用RouterLink标签和RouterView标签来渲染时显示的有可能是上一级的目录指向的vue组件,而无法显示子路由指向的组件的内容,这是为什么呢&…

AI问答-HTTP:理解 Content-Disposition

一、简介 Content-Disposition是HTTP协议中的一个响应头字段,它主要用于指示如何处理响应的内容以及如何呈现给用户。这个字段是MIME协议类型的扩展,用于指导MIME用户代理(如浏览器)如何显示附加的文件。Content-Disposition的主…

C++:opencv生成结构元素用于膨胀腐蚀等cv::getStructuringElement

cv::getStructuringElement 是 OpenCV 库中用于生成结构元素的函数。结构元素在形态学操作中(如膨胀、腐蚀、开运算、闭运算等)扮演着关键角色。这个函数可以创建不同形状和尺寸的结构元素,以适应不同的图像处理需求。 函数原型 cv::Mat cv…

yolo自动化项目实例解析(二)ui页面整理

我们在上一章整理main.py 的if __name__ __main__: 内容还留下面这一段, app QApplication(sys.argv) # 初始化Qt应用ratio screen_width / 2560 # 分辨率比例# 设置全局字体大小# 计算字体大小base_font_size 13# 基准字体大小,适合1920*1080分辨…

【数据结构与算法 | 灵神题单 | 合并链表篇】力扣2, 21, 445, 2816

1. 力扣2:两数相加 1.1 题目: 给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的,并且每个节点只能存储 一位 数字。 请你将两个数相加,并以相同形式返回一个表示和的链表。 你可…

vue3 +百度地图 实现 地点检索,输入联想,经纬度,逆地理编码,创建标记,label等

由于百度地图文档确实有点欠缺,在这里记录一下 vue3 百度地图(js api 3.0)实现效果如下实现方式注意事项 vue3 百度地图(js api 3.0) 需求: 地图弹框组件,可以搜索地图点,输入联想…

尚品汇-订单拆单、支付宝关闭交易、关闭过期订单整合(五十)

目录: (1)拆单接口 (2)取消订单业务补充关闭支付记录 (3)支付宝关闭交易 (4)查询支付交易记录 (5)PaymentFeignClient 远程接口 &#xff08…

指针与函数传递

title: 指针与函数传递 date: 2024-09-14 21:33:51 description: 函数传递多个元素 tags: c language skaiuijing 理解指针 很多人经常使用指针,看到这个标题可能不屑一顾。但笔者想说,把指针当作理所当然而不去探索它的本质,这是不对的。…

Go语言错误处理详解

Go语言以其简洁、高效和并发能力著称。在实际开发中,错误处理是一个不可避免且至关重要的部分。本文将深入探讨Go语言中的错误处理机制,涵盖其原理、使用方法、最佳实践,并提供丰富的代码示例和中文注释。 一、错误处理的基本概念 在Go语言…

7. 探究模型参数与显存的关系以及不同精度造成的影响

这篇文章将探讨两个重点: 模型参数与显存(GPU 内存)之间的关系不同精度的导入方式,以及它们对显存和性能的影响 理解这些概念会让你在模型的选择上更加游刃有余。 文章目录 模型参数与显存的关系模型参数量与内存占用GPU 显存需求…

JMeter脚本开发

环境部署 Ubuntu系统 切换到root用户 sudo su 安装上传下载的命令 apt install lrzsz 切换文件目录 cd / 创建文件目录 mkdir java 切换到Java文件夹下 cd java 输入rz回车 选择jdk Linux文件上传 解压安装包 tar -zxvf jdktab键 新建数据库 运行sql文件 选择sql文件即…

基于51单片机的电饭锅控制系统proteus仿真

地址: https://pan.baidu.com/s/1CGyg6uPhFI0MeaBWwe_HAg 提取码:1234 仿真图: 芯片/模块的特点: AT89C52/AT89C51简介: AT89C52/AT89C51是一款经典的8位单片机,是意法半导体(STMicroelectro…

RedisTemplate操作ZSet的API

文章目录 ⛄概述⛄常见命令有⛄RedisTemplate API❄️❄️ 向集合中插入元素,并设置分数❄️❄️向集合中插入多个元素,并设置分数❄️❄️按照排名先后(从小到大)打印指定区间内的元素, -1为打印全部❄️❄️获得指定元素的分数❄️❄️返回集合内的成员个数❄️❄…

前端网络层性能优化

前言 在数字时代,速度已成为互联网体验的关键。用户对网页加载时间的容忍度越来越低,每一毫秒的延迟都可能导致用户的流失。根据谷歌的研究,页面加载时间超过3秒的网站,其跳出率会增加120%。在这个以用户为中心的网络世界里&…

Git换行符自动转换参数core.autocrlf的用法

core.autocrlf 是 Git 中用于控制换行符自动转换的配置选项。它有以下几个可能的值: 1. true 作用:在 checkin 时将 CRLF 转换为 LF,在 checkout 时将 LF 转换为 CRLF。适用场景:适用于 Windows 用户,希望在本地文件…

LineageOS刷机教程

版权归作者所有,如有转发,请注明文章出处:https://cyrus-studio.github.io/blog/ LineageOS 是一个基于 Android 开源项目(AOSP)的开源操作系统,主要由社区开发者维护。它起源于 CyanogenMod 项目&#xff…

10年Python程序员教你多平台采集10万+电商数据【附实例】

10万级电商数据采集需要注意什么? 在进行10万级电商数据采集时,有许多关键因素需要注意: 1. 采集平台覆盖:确保可以覆盖主流的电商平台,如淘宝、天猫、京东、拼多多等。 2. 数据字段覆盖:检查是否可以对平…

go 笔记

数据结构与 方法(增删改查) 安装goland,注意版本是2024.1.1,不是2024.2.1,软件下载地址也在链接中提供了 ‘go’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 在 Windows 搜索栏中输入“环境变量”&#…

架构理论碰撞:对比TOGAF、Zachman、DODAF和FEAF等主流架构框架

信息架构框架对比分析:选择适合企业的最佳方案 在企业数字化转型过程中,信息架构的设计与实施至关重要。成功的信息架构能够有效地支持业务流程优化,提升数据管理效率,推动技术创新。然而,不同的信息架构框架各有其独…

linux gcc 静态库的简单介绍

在 Linux 上,使用 GCC 编译器来创建和调用静态库时,涉及的实现原理和调用机制可以分为以下几个步骤: 1. 静态库的创建 静态库(通常以 .a 结尾)是由多个目标文件(.o 文件)打包在一起的归档文件…