首页 > 其他分享 >快速搭建最简单的前端项目vue+View UI Plus

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

时间:2024-09-11 17:50:25浏览次数:12  
标签:npm vue Visual 点击 Code Plus UI 下载 Studio

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/,如下图,项目启动成功。
在这里插入图片描述

标签:npm,vue,Visual,点击,Code,Plus,UI,下载,Studio
From: https://blog.csdn.net/qq_40718345/article/details/142143587

相关文章

  • 基于springboot+vue乒乓球预约管理系统
    基于springboot+vue+mysql实现的乒乓球预约管理系统(源码+数据库+部署视频)###主要技术SpringBoot、LayUI、Vue、MySQL###系统角色用户、管理员###系统功能前台:首页、乒乓球场、公告信息、留言反馈、个人中心后台:个人中心、用户管理、乒乓球场管理、场地类型管理......
  • 基于springboot+vue实现的在线商城系统
    系统主要功能:(1)商品管理模块:实现了商品的基本信息录入、图片上传、状态管理等相关功能。(2)商品分类模块:实现了分类的增删改查、分类层级管理、商品分类的关联等功能。(3)订单管理模块:实现了订单的查询、创建、删除、退货等功能。(4)用户管理模块:实现了用户的注册、登录、密码找......
  • 移动UI案例:交通旅行类整套案例
    1.地图导航:提供地图展示、路线规划、实时导航等功能,帮助用户找到目的地并提供最佳路线。2.公交线路查询:提供公交车站信息、线路查询、实时公交到站信息等功能,方便用户使用公共交通工具。  3.实时交通信息:提供道路实时交通拥堵情况、路况预测、交通事故提示等功......
  • 高颜值官网(2):12个小家电网站UI,这是火辣辣的美呀。
    小家电网站的设计应该注重简洁、清晰和易用。以下是一些设计建议:1.清晰的导航:网站应该有清晰的导航菜单,让用户能够轻松找到他们需要的产品或信息。2.产品展示:网站应该有清晰的产品展示页面,包括高质量的产品图片和详细的产品描述。3.简洁的布局:避免过多的视觉噪音,保持页面......
  • Vue中过滤器的使用
    下面是一个日期格式的过滤器用moment.js来做的一个日期过滤器:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><......
  • Vue中列表渲染中的v-for的使用
    v-for的使用:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</tit......
  • 基于Springboot+vue校园求职招聘系统设计
    ......
  • 【F179】基于Springboot+vue实现的幼儿园管理系统
    作者主页:Java码库主营内容:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。收藏点赞不迷路 关注作者有好处文末获取源码项目描述系统管理也都将通过计算机进行整体智能化操作,对于幼儿园管理系统所牵扯的管理......
  • element plus 选择多个日期(年月日)时功能不生效问题
    问题:elementplus官网文档中的日期多选功能,设置type="months|years|dates"发现功能失效,日期选择面板显示也是默认的date,控制台警告提示type的值无效。<divclass="block"><spanclass="demonstration">Months</span><el-date-pickerv-model="va......
  • vue2+swiper 纵向弧形滚动效果
    很垃圾的弧形轮播效果,其实不算弧形,只是一个爬坡效果,最终否了但保留一下配置项的代码。。方案1:swiperOptions:{direction:"vertical",spaceBetween:-80,slidesPerView:5,loop:true,centeredSlides:true,//当前的activesl......