Vue UI - 可视化的Vue项目管理器

news2024/11/15 6:28:36

image

概述

  Vue CLI 3.0 更新后,提供了一套全新的可视化Vue项目管理器 —— Vue UI。所以要想使用它,你的 Vue CL I版本必须要在v3.0以上。

一、启动Vue UI

1.1 环境准备

1.1.1 安装node.js

  访问官网(外网下载速度较慢)或 http://nodejs.cn/download/ 获取安装包文件,再安装时全部选择默认,否则可能需要手动配置。安装完成后,在命令行输入以下命令,查看版本号确认安装成功。

node -v
npm -v

  因国内使用npm很慢,所以推荐使用淘宝npm镜像cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.1.2 安装vue-cli

# 安装vue-cli3
npm install -g @vue/cli
# 或者
cnpm install -g @vue/cli

# 查看版本号确认安装成功。注意:V必须为大写
vue -V

1.2 启动 Vue UI

  Vue UI 的启动命令很简单,选择好要创建项目的存放目录,接着终端执行以下命令后,它会自动跳转到你的默认浏览器并打开8000端口,你会看到:

vue ui

在这里插入图片描述

  这就是Vue UI的界面,在这里我们可以实现对Vue项目的全可视化操作,接下来我们就一一演示它的功能。

二、使用 Vue UI 创建项目

2.1 创建项目文件

  点击创建,然后选择要建项目放置的位置,如下图所示:

在这里插入图片描述

  如果在该目录下存在Vue项目,可以看到之前创建的项目。这里我们需要继续点击下方的 + 在此创建新项目 绿色按钮,如下图所示:

在这里插入图片描述

  在这里,可以填写项目名称,个人建议去掉初始化git仓库。不过这里可选择的配置项会更多,比如包管理器(npm),需不需要新手引导的文件,即是否创建空白项目等等,这都是使用命令行创建所不能带给我们的。

在这里插入图片描述

2.2 选择配置方案

  我们之前命令行创建的话,只会有这里的前三个选项:

在这里插入图片描述

  Vue UI中还给我们提供了第四种预设:远程Git仓库拉取。 不过,我们仍然要选择手动配置,如下图所示。

在这里插入图片描述

2.3 自定义的可选配置项

  这一步在选择项目所需的配置项时,就很直观了。页面内也有很多提示和查看详情的入口,相较于之前命令行的方式,方便简单多了。我这里只简单选择了Choose Vue version、Babel、Router等三项。

在这里插入图片描述

  进一步的详细配置就只有两项:

  • 选择Vue语法版本(2.x / 3.x(Preview));
  • 选择路由模式(history mode / hash mode);

在这里插入图片描述

2.4 是否保存当前配置为预设

  最后还是一样,会问你要不要保存当前配置为预设,这就看你们自己了。

在这里插入图片描述

2.5 等待项目的创建完成

  之后就会提示:在创建项目… 等待接即可。

在这里插入图片描述

  创建完成后会默认进入该项目的管理界面 —— 项目仪表盘,就像下图的欢迎页。

在这里插入图片描述

三、使用 Vue UI 管理项目

  使用Vue UI创建的项目,会列出在Vue UI的首页,返回首页的操作如下图所示:

在这里插入图片描述

  这样就看到了我们刚才创建的项目,点击也就又回到了仪表盘页面。

在这里插入图片描述

  接下来看如何使用可视化的Vue项目管理器(Vue UI)来对具体项目的管理。

3.1 插件管理

  进入插件页会列出你当前项目已安装的所有插件信息。

在这里插入图片描述

  而且,这与package.json中devDependencies字段内容一致(以@vue/cli-plugin-开头的代表的是插件):
在这里插入图片描述

  此外Vue UI中,对插件的管理还包括:搜索,添加,更新等等。

在这里插入图片描述

  比如我们来演示一个插件的新增 —— axios:

在这里插入图片描述

3.2 依赖管理

  同样对于项目依赖也有列出,也支持相应的增删改,更新等操作。

在这里插入图片描述

  其中运行依赖对应package.json中的dependencies字段内容:

在这里插入图片描述

  之前的插件信息和此处的开发依赖同属于package.json中的devDependencies字段:

在这里插入图片描述

3.3 项目配置

  有关项目本身的一些基础设置可以在这里配置。比如公共路径,默认是绝对路径 / ,我们要想使用相对路径就可以给他置空,或者改成 ./。还有输出目录的设置,默认是dist文件夹,我们可以给他改成任意命名。

在这里插入图片描述

3.4 任务

  Vue U I对于项目的编译运行,打包等操作也支持可视化操作,具体对应vue-cli-service中的三种命令(serve、build、inspect),如下图所示:

在这里插入图片描述

serve — 编译并运行

这一步操作相当于执行命令:npm run serve

  仪表盘中会统计本次编译的各种信息,这里同样也有输出控制台,可以查看编译的细节和结果。

在这里插入图片描述

build — 编译并打包

打包操作本质上也和命令一样:npm run build

在这里插入图片描述

  打包结果如下:

在这里插入图片描述

  在项目目录中可以看到生成的dist文件夹:

在这里插入图片描述

inspect — 查看webpack配置

  这里对于webpack配置的查看也很方便,不再需要我们使用命令把webpack配置另存到一个文件中查看,这里直接点击运行即可。
在这里插入图片描述

结语

结语

把今天最好的表现当作明天最新的起点…….~

  投身于天地这熔炉,一个人可以被毁灭,但绝不会被打败!一旦决定了心中所想,便绝无动摇。迈向光明之路,注定荆棘丛生,但从不妨碍我继续向前。自己选择的路,即使再荒谬、再艰难,跪着也要走下去!放弃,曾令人想要逃离,但绝境重生方为宿命。若结果并非所愿,那就在尘埃落定前奋力一搏!

在这里插入图片描述

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

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

相关文章

民航管理局无人机运营合格证技术详解

1. 证书定义与意义 民航管理局无人机运营合格证(以下简称“合格证”)是对符合民航法规、规章及标准要求的无人机运营单位或个人进行资质认证的重要证明。该证书旨在确保无人机运营活动的安全、有序进行,保护国家空域安全,维护公众…

电子电气架构 --- 软件定义汽车需要怎么样的EE架构

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不…

反射型XSS的几种payload

目录 第一种&#xff1a;采用的是urlcode编码 第二种&#xff1a;前面用html实体编码&#xff0c;后面用urlcode编码 第三种&#xff1a;只对&#xff1a;使用urlcode编码 第四种&#xff1a;对<>进行html实体编码 第五种&#xff1a;textarea 第六种&#xff1a;和…

【JavaEE】锁策略和CAS

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【Java】登神长阶 史诗般的Java成神之路 &#x1f4b0;一.常见的的锁策略 锁策略&#xff08;Locking Strategy&#xff09;是指在多线程环境中&#xff0c;为了控制对共享资源的访问&#xff0c;确保…

「OC」探索CALayer:基础知识与实用技巧简要介绍

「OC」探索CALayer&#xff1a;基础知识与实用技巧简要介绍 文章目录 「OC」探索CALayer&#xff1a;基础知识与实用技巧简要介绍前言认识CALayerCALayer的相关属性 UIView和CALayer区别联系创建UIView和CALayer的原因 开始创建CALayer视图层级CALayers 和 Sublayersposition与…

javaweb-flex布局

1. flex布局原理 flex是flexible Box的缩写&#xff0c;意味着"弹性布局"&#xff0c;用来为盒子模型提供最大的灵活性&#xff0c;任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后&#xff0c;子元素的float、clear和vertical-align属性都将失…

【质因数分解】将正整数分解质因数

将一个正整数分解成质因数&#xff0c;例如&#xff1a;输入90&#xff0c;打印输出 902*3*3*5 使用C语言实现&#xff1a; #include<stdio.h>int main(){int n,i;printf("请输入需要分解的正整数&#xff1a; ");scanf("%d",&n);for(i2;i<…

六. 部署分类器-deploy-classification-basic

目录 前言0. 简述1. 案例运行2. 代码分析2.1 main.cpp2.2 model.cpp 3. 补充说明结语下载链接参考 前言 自动驾驶之心推出的 《CUDA与TensorRT部署实战课程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 本次课程我们来学习课程第六章—部署分类器&#xff…

Flutter-自适用高度PageView

需求 在 Flutter 中&#xff0c;PageView 是一个非常常用的组件&#xff0c;能够实现多个页面的滑动切换。然而&#xff0c;默认的 PageView 高度是固定的&#xff0c;这在展示不同高度的页面时&#xff0c;可能会导致不必要的空白或内容裁剪问题。为了使 PageView 能够根据每…

Educational Codeforces Round 169 (Rated for Div. 2)(ABCDE)

A. Closest Point 签到 #define _rep(i,a,b) for(int i(a);i<(b);i) int n,m; int q[N]; void solve() {cin>>n;_rep(i,1,n)cin>>q[i];if(n!2)cout<<"NO\n";else if(abs(q[1]-q[2])!1)cout<<"YES\n";else cout<<"…

堆排序-优先级队列

我们用堆排来实现优先级队列&#xff0c;那么优先级队列是什么&#xff0c;就是 我们给每一个任务都添加一个优先级&#xff0c;优先级越高执行的越早我们用&#xff0c;但是我们怎么能按照顺序优先拿到优先级高的任务呢&#xff0c;我们可以用排序 来进行&#xff0c;也可以用…

Mybatis-Plus分页插件注意事项

使用Mybatis-Plus的分页插件进行分页查询时&#xff0c;如果结果需要使用<collection>进行映射&#xff0c;只能使用嵌套查询&#xff0c;而不能使用嵌套结果映射 嵌套查询和嵌套结果映射是Collection映射的两种方式&#xff0c;下面通过一个案例进行介绍 例如有room_i…

MyBatis源码系列3(解析配置文件,创建SqlSessionFactory对象)

创建SqlSessionFactory&#xff1b; 首先读取配置文件&#xff0c;使用构造者模式创建SqlSessionFactory对象。 InputStream inputStream Resources.getResourceAsStream("mybatis-config.xml");SqlSessionFactory sqlSessionFactory new SqlSessionFactoryBuilder…

C++面试基础系列-struct

系列文章目录 文章目录 系列文章目录C面试基础系列-struct1.C中struct2.C中struct2.1.同名函数2.2.typedef定义结构体别名2.3.继承 3.总结3.1.C和C中的Struct区别 4.struct字节对齐5.struct与const 关于作者 C面试基础系列-struct 1.C中struct struct里面只能放数据类型&#…

算法力扣刷题记录 八十六【47.全排列 II】

前言 回溯章节第12篇。 记录 八十四【46.全排列】初步学习了集合中无重复元素的排列求解。 本文&#xff1a;记录 八十六【47.全排列 II】当集合中有重复元素时&#xff0c;求解排列&#xff1b; 一、题目阅读 给定一个可包含重复数字的序列 nums &#xff0c;按任意顺序 返回…

VirtualBox安装Oracle Linux 7.9全流程

1.准备工作 1.1 VirtualBox下载 下载地址1&#xff1a; Downloads – Oracle VM VirtualBoxhttps://www.virtualbox.org/wiki/Downloads 下载地址2&#xff1a; https://www.oracle.com/virtualization/virtualbox/ 选择以上的任意一个地址都可下载到。 1.2 Oracle Linux 操作…

购物车系统设计方案

背景 在电商领域&#xff0c;购物车&#xff08;Shopping Cart&#xff09;扮演着至关重要的角色&#xff0c;它是连接用户浏览商品与最终完成购买行为的桥梁。 从两个视角来阐述&#xff0c;作为ToC的购物车&#xff0c;存在的意义&#xff1a; 从用户角度&#xff1a; 收…

ssm大学生实习管理系统的设计与实现-计算机毕业设计源码45837

摘 要 在信息时代&#xff0c;随着网络的快速发展&#xff0c;各个行业都离不开信息的处理。在这样的背景下&#xff0c;高校需要以学生管理信息为导向&#xff0c;并与学生实习的持续创新相结合。因此&#xff0c;设计一个高校学生实习管理系统就显得非常必要。 该系统采用了B…

维基百科向量搜索;简单易用的GraphRAG实现;友好的人工智能助手;AI的音乐多模态

✨ 1: Semantic Search on Wikipedia 维基百科向量搜索 为了证明 Upstash Vector 的可扩展性&#xff0c;Upstash在一个数据库中以 11 种语言&#xff08;144m 向量&#xff09;索引了整个维基百科 ◆ 超过700GB的数据 ◆ 快速语义搜索 ◆ 与维基百科聊天 为您提供了一款可…

Unity--AssetBundle AB包管理器

1.简介 AB包&#xff08;AssetBundle&#xff09;是Unity中用于资源管理的一种机制&#xff0c;它允许开发者将多个文件&#xff08;如纹理、模型、音频等&#xff09;打包成一个单独的文件&#xff0c;以便于在游戏运行时动态加载和卸载。 但是现在出现了最新的Addressable来…