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

server/2024/11/14 12:54:21/

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.ppmy.cn/server/119280.html

相关文章

MATLAB算法实战应用案例精讲-【人工智能】数据血缘分析(二)(概念篇)

目录 几个相关概念 数据血缘与数据关系 数据血缘与数据分类 数据血缘与数据出处 数据血缘与知识图谱 数据库血缘 数据表血缘 数据字段血缘 算法原理 什么是数据血缘 数据血缘分析的价值: 元数据在数据血缘分析中的作用 血缘收集方法 数据血缘组成 2.1 数据节点…

Python办公自动化案例(四):将Excel数据批量保存到Word表格中

案例:将excel数据批量保存到Word表格中 要将Excel数据批量保存到Word表格中,可以使用Python的openpyxl库来读取Excel文件,以及python-docx库来创建和编辑Word文档。以下是一段示例代码,以及代码解释和一些注意事项。 准备好的Excel数据: 1.安装所需库 首先,确保你已经…

Linux 进程2

环境变量 再Linux操作系统中一切皆文件,这个环境变量自然也是一个文件,它的作用是辅助我们使用操作系统还可以辨识我们是什么用户(一般用户,root用户)。 env是读取完整环境变量的指令,里面记录了许多我登录操作系统所用的用户的信…

html+css网页设计 旅游网站首页1个页面

htmlcss网页设计 旅游网站首页1个页面 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1&#xff…

istio中如何使用serviceentry引入外部服务

假设需要引入一个外部服务,外部服务ip为10.10.102.90,端口为32033. 引入到istio中后,我想通过域名gindemo.test.ch:9090来访问这个服务。 serviceentry yaml内容如下: apiVersion: networking.istio.io/v1beta1 kind: ServiceEn…

硬件工程师笔试面试——电机

目录 18、电机 18.1 基础 电机原理图 电机实物图 18.1.1 概念 18.1.2 电机的一些基本分类和特点 18.2 相关问题 18.2.1 不同类型的电机在实际应用中有哪些具体的优势和劣势 18.2.2 在设计一个电机系统时,我应该如何考虑电机的选型和配置? 18.2.3 对于需要频繁启停的…

828华为云征文|华为云Flexus云服务器X实例之openEuler系统部署Docker Compose管理工具Dockge

828华为云征文|华为云Flexus云服务器X实例之openEuler系统部署Docker Compose管理工具Dockge 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、Dockge介绍2.1 Dockge简介2.2 Dockge功能…

Python——俄罗斯方块

俄罗斯方块游戏是一款经典的益智游戏,通常使用编程语言Python来实现。下面是一个简单的俄罗斯方块游戏的示例代码: import pygame import random# 定义颜色 BLACK (0, 0, 0) WHITE (255, 255, 255) RED (255, 0, 0) GREEN (0, 255, 0) BLUE (0, 0,…