如何打开vue UI界面 并创建 vue项目

最新推荐文章于 2025-10-13 07:00:00 发布
原创 最新推荐文章于 2025-10-13 07:00:00 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui #vue.js #前端

本文介绍了如何通过命令行打开VueUI界面，并在该界面中创建一个新的Vue项目，包括选择路由、Vuex和CSS配置等选项。接着，文章详细阐述了在VueUI中启动项目的过程，为初学者提供了清晰的步骤指南。

如何打开vue UI界面 并创建 vue项目

打开 vue ui 界面

  • cmd 知道吧 在你想要创建项目的文件地址栏 输入 cmd 并回车
  • 在指定文件夹的url栏输入 创建的项目就会保存在那里（纯属为了方便没有硬性规定，我爱在那建在那建）
    在这里插入图片描述
  • 打开了控制面板 输入 vue ui 等待跳转即可

在vue ui 界面创建一个新项目

在这里插入图片描述

  • 手动创建
    在这里插入图片描述
  • 根据自己的需求去选择
    • 我勾选了 路由、vuex 、css配置
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

在 vue UI 界面 运行项目

![在这里插入图片描述](https://img-blog.csdnimg.cn/16a5f6b6221542aa829ab970f1aa1982.png

【 Vue全家桶 · Vue CLI（三）】使用可视化的Vue项目管理器（Vue UI）来创建、开发和管理你的项目
JZevin的博客
10-14 3975
vue ui
基于 Vue 2 + Vant UI 的移动端项目模板，集成了常用的开发配置和工具
12-25
随着移动互联网的快速发展，移动端的网页和应用需求日益增长。...通过集成Vue.js和Vant UI，以及一系列实用的开发工具和配置，它大幅提升了开发效率，简化了开发流程，并确保了项目代码的规范性和可维护性。
vue ui的安装及使用
DangR_Jisoo的博客
09-02 3万+
vue ui是什么？ 简单来说，vue ui是一个可视化图形界面，方便你去创建、更新和管理vue项目，包括下载router，vuex，axios，elementui等插件，配置好一些属性以及依赖关系，方便我们使用，我个人第一次接触它就感觉非常非常非常智能和强大 配置步骤 安装Vue CLI，因为vue ui是在Vue CLI基础上封装的 npm install -g @vue/cli 打开C:\Users*xxxx*\AppData\Roaming\npm，看看有没有下图框出的文件 将C:\Use
14 个最佳 Vue UI 组件库推荐
古他妈阳光之神☀️
08-24 3万+
Vue.js 是无数前端开发人员首选的 JavaScript 框架，因为它易于学习和使用。 组件是 Vue 框架的核心——它们可以帮助你更快地从想法转变为功能性 UI。
Vue CLI（九）图形界面（Vue UI）
最新发布
onlymscn的博客
10-13 1447
VueUI是VueCLI提供的可视化项目管理工具，通过图形界面实现项目创建、插件管理、依赖升级等操作，降低开发门槛。核心功能包括可视化项目配置、插件/依赖管理、任务运行、打包分析等，支持团队协作和项目规范统一。启动方式为执行vueui命令，适合新手快速上手和团队标准化开发。VueUI本质上是调用CLI命令的本地Web服务，可与命令行互补使用，支持插件扩展和团队预设管理，是企业级项目开发的实用工具。
值得推荐的VUE UI框架
大白兔奶糖的博客
08-26 2万+
1. Ant Design Vue 官方网站：https://2x.antdv.com/components/overview/ Ant Design Vue 是一个非常成熟的框架，使用 Ant Design Vue 创建用户界面非常简单，还适用于react,angular，而且文档非常的详细。Ant Design Vue 在 GitHub 上拥有 15k+ 颗星，每周下载量为 49k，数据已经说明了它的受欢迎程度。 1. VantUI 官方网站：https://youzan.github.io
vue脚手架通过ui界面方式创建项目
搬砖猴哥
06-13 6980
我们vue脚手架提供了图形界面操作项目，比之前通过命令操作的形式更加简单，下面我就来总结一下图形界面创建项目的基本步骤 1、首先保证全局安装@vue/cli工具 ，没有自行下载 cnpm i @vue/cli -g 2、推荐下载yarn包管理器 cnpm i yarn -g 3、接下来我们就可以在自己的电脑里创建项目，找到电脑某个位置，在此文件夹按住shift同时右键，在此处打开cmd命令窗口...
想要打开vue ui界面--下面是我的解决方式
m0_72735063的博客
11-25 636
就可以打开vue ui界面啦。
精选资源
基于Vue 3.0的pad界面UI混合开发设计源码
09-28
本项目的核心即是基于Vue 3.0的pad界面UI混合开发设计源码，其涵盖了多个方面的技术和文件类型，旨在为开发人员提供一套完整的设计框架。 在设计方面，该项目包含了19个Vue组件，这些组件是构建用户界面的基础单元...
精选资源
基于Vue3和Naive UI的Lumen IM网页版在线聊天项目设计源码
09-25
为了满足这一需求，我们提出并实现了一个名为“基于Vue3和Naive UI的Lumen IM网页版在线聊天项目设计源码”的在线聊天平台，它在技术选型、功能实现以及用户体验方面都有其独特的设计和实现。本项目采用Vue3作为前端...
vue3，vite项目最基础示例，vue-router+naive-ui+mock.js
12-09
在创建过程中，我们将通过Vite的命令行工具来初始化项目，选择Vue3作为构建框架，并通过命令行指令来安装所需的依赖包，如Naive-UI和Vue-Router。 Naive-UI的安装和配置相对简单，安装完成后，我们可以在项目中引入...
vue ui 创建项目
m0_46610349的博客
10-11 3105
如何在命令提示符里通过 vue ui 创建项目
使用可视化的Vue项目管理器（Vue UI）来创建、开发和管理你的项目
weixin_45131680的博客
06-20 3054
这一步在选择项目所需的配置项时，就很直观了：页面内也有很多提示和查看详情的入口，相较于之前命令行的方式，就很银杏了，哈哈Babel；Router；选择Vue语法版本（2.x / 3.x（Preview））；选择路由模式（history mode / hash mode）；简单选择2.x和hash mode，点击创建项目！用完这一圈Vue UI下来，感觉比命令行直观太多了。不过对于程序猿来说，虽然Vue UI是很方便，可是耐不住命令行的魔力呀~
vue通过vue ui 创建项目
懒惰的小妖
06-22 513
进入到指定的工作空间后，通过vue ui 来启动Vue 图形管理器，这种情况下是小编还没有安装； 1.安装Vue cli cnpm install -g @vue/cli 2. 查看版本 vue -V 3.在命令行运行，就会出现图形化管理 vue ui 4. 创建 选择，创建项目不保存预设 5.创建项目后出现此界面（小编创建项目的时候，第一次创建一直是正在创建项目，但并没有创建成功，只好删掉，重新创建，创建成功） 6.选择插件，例如vue-..
使用vueUI创建新项目
00年女程序员分享自己的学习笔记
07-07 1472
使用vueUI创建新项目cmd打开命令窗口，输入vue ui打开vue可视化面板，然后 点击创建 选择一个路径，点击在此创建 输入项目名，点击下一步 选择手动配置 选择这四项，下一步 选择2.x 点击创建 app.vue文件如下 router里面的index.js文件如下： 删除views文件夹（里面有两个文件：HomeView和AboutView）删除components中的HelloWorld.vue文件components文件夹下创建文件...
使用vue ui创建vue项目(基于图形化界面的方式)
南野子
05-23 5975
前提： 1.打开cmd ，安装vue脚手架 npm install -g @vue/cli 2.若之前安装过无需重新安装；直接在cmd 中输入vue ui 若输入vue ui 后无反应，则是安装的脚手架版本太低，直接升级脚手架版本就行；输入 cnpm i -g @vue/cli 安装完成后重新输入vue ui 等待自动打开浏览器； 创建项目步骤： ①点击创建 ②选择目录后,点击在此创建项目 ③输入项目名称，填写git仓库建议 init project ，其他项默认 ④点击下一步，选择默
vue ui工具来创建vue项目（IDEA）
qq_41876182的博客
06-21 294
使用vue ui工具来创建vue项目（IDEA） 1.下载node.js 首先我们上node.js官网， 下载最新的长期版本，直接运行安装完成之后，我们就已经具备了node和npm的环境 2.检查是否安装成功 3.安装vue环境 # 安装淘宝npm npm install -g cnpm --registry=https://registry.npm.taobao.org # vue-cli 安装脚手架依赖包 npm install -g @vue/cli 或 yarn global add @vue/
使用vue UI进行可视化创建vue项目
热门推荐
Good Luck
07-27 8万+
查看是否已经安装了vue/cli vue -V 如果没有则进行安装一下 npm install -g @vue/cli # OR yarn global add @vue/cli 找个空目录进行cmd vue ui
通过vue ui创建项目
2301_79106424的博客
03-05 677
这的serve指的是package.js 里边的这个serve ，表示执行这里边的脚本。注意 因为这里占用的端口是8080 与后端的服务器有冲突 所以我们要修改一下端口号。在vue.config.js中加入代码 重新npm run serve 就好了。这里是选择vue版本 我要用的是vue2 选好点击创建项目就好了。启动前端工程 将创建好的项目导入编译器 我这用的是vscode。会打开一个vue的网页 在此创建项目 可以选择在那个路径创建。创建好后的重点的目录结构以及结构的作用。
vue ui界面创建项目
07-02
Vue UI 是一个基于 Vue.js 的轻量级前端组件库，它提供了一套美观、易用的界面元素和设计风格，用于快速构建用户界面。如果你想使用 Vue UI 创建一个新的项目，可以按照以下步骤操作： 1. **安装 Vue CLI**: 首先，确保已经全局安装了 Vue CLI，如果没有，请运行 `npm install -g @vue/cli` 或者 `yarn global add @vue/cli`。 2. **创建新项目**: 打开终端或命令提示符，输入 `vue create [项目名称]`，然后按提示选择模板。Vue CLI 提供了多个预设模板，包括 Vue UI 的官方主题支持。 ```sh vue create my-project --preset vuetify ``` 这里 `--preset vuetify` 表示选择 Vue UI 的 Vuetify 模板。 3. **安装依赖**: 创建项目后，进入项目目录 `cd my-project`，然后安装 Vue UI 和所需的其他依赖（如果需要）： ```sh npm install @vuetifyjs/vuetify --save ``` 4. **配置**: 在 `src/main.js` 或 `main.ts` 文件中，引入并配置 Vuetify，初始化应用： ```javascript import { createApp } from 'vue'; import Vuetify from 'vuetify'; import App from './App.vue'; createApp(App).use(Vuetify).mount('#app'); ``` 5. **使用组件**: 现在你可以开始在 `./components` 目录下创建和使用 Vue UI 组件，比如 `vuetify/Vuetify.vue` 中提供的按钮、卡片、侧边栏等。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值