vue3.0 图形界面创建项目

最新推荐文章于 2024-07-02 10:47:57 发布
最新推荐文章于 2024-07-02 10:47:57 发布
阅读量861 收藏 1
点赞数
分类专栏： 前端 文章标签： vue-cli vue脚手架 vue图形界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/double_sweet1/article/details/103340699
版权

vue创建项目有命令行和图形界面两种方式，命令行就不用说了，今天主要说下怎样打开vue图形界面，用图形界面来创建项目。

自己踩的坑是在安装vue-cli全局脚手架时，使用的cnpm淘宝镜像，这样是可以安装全局vue-cli脚手架，但是却无法使用vue ui启动图形界面。因此，如果想要使用图形界面创建vue项目的话，安装vue-cli脚手架的采用的命令如下：

npm install -g @vue/cli

然后执行

vue ui

这样就可以进入可视化界面了

 

后面发现问题不在这里，在于安装的vue-cli版本高于3.0时才可以使用vue ui

Coding101
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-cli3.0 使用图形化界面创建和管理项目
Gaia_qi的博客
10-26 683
1.打开命令提示行输入vue ui vue ui 2.点击创建选择要存放的位置，点击在此创建项目 3.填写项目信息，点击下一步 4.点击默认，创建新项目 5.创建项目，需要等待一下 6.到这里项目就创建成功啦 7.启动一下看下效果 8.启动成功 ...
Vue-CLI-3.0图形化界面初试
liyoro的专栏
04-11 882
环境 系统版本 macOS Mojave 10.14 安装Node 根据官方文档推荐，选择了8.x版本的Node Node 版本 v8.15.1 npm 版本 v6.4.1 node 8.x下载地址 安装Vue-Cli npm install -g @vue/cli # OR yarn global add @vue/cli 检查vue版本是否正确 (3.x) vue --version 图形...
【前端环境3】已有代码配置vue环境 + 使用 vue ui 图形化界面创建vue项目 + vue项目目录结构
最新发布
定期分享我的发现和想法，感谢你的陪伴和支持
07-02 1689
使用 vue ui 图形化界面创建 vue 项目是一种方便的方式，可以直观地操作和查看项目的配置和依赖。
vue3 图形界面创建项目
weixin_30849591的博客
09-03 212
1.安装vuecli3脚手架 npm i @vue/cli 2.命令窗口输入 vue ui 自动弹出框 3.创建--> 在此创建新项目 --> 输入项目名称，选择包管理器 -->下一步 4.创建项目 转载于:https://www.cnblogs.com/divtab/p/11454309.html...
使用vue-cli3&vue ui图形化界面创建项目
weixin_30856725的博客
11-12 990
Vue CLI3 需要Node.js8.9 或更高版本 sudo npm install -g @vue/cli # OR sudo yarn global add @vue/cli vue create hello-world cd hello-world npm run serve // 运行 http://localhost:8000 vue ...
vue 3.0 创建项目
qq_25799227的博客
06-08 1521
vue 3.0 创建项目
vue_form_design:基于Vue3.0的表单设计器
03-16
总结来说，Vue Form Design是基于Vue3.0的高效表单构建工具，利用其强大的功能，开发者可以快速创建和管理复杂的表单，同时享受到Vue3.0带来的性能和开发体验提升。通过解析压缩包内的源码，可以深入理解其工作原理...
使用Vue-cli3.0创建的项目 如何发布npm包
10-16
Vue-cli 3.0作为Vue开发的官方脚手架工具，进一步简化了配置流程，并且引入了图形化界面。在开发过程中，我们可能会遇到想要将自己编写的组件或库发布为npm包的情形，这样其他人便可以轻松地将其引入到自己的项目中...
vue3.0项目构建流程
qq_30764777的博客
12-13 773
前言 19年8月份的时候，vue-cli更新到了3.X，新版本的脚手架封装度更高，配置起来简单许多，旨在让用户把精力都放在编写业务代码中，3.X脚手架已经自动搭建在webpack4上，所以不用大家再去从webpack3升级到webpack4,当然性能也提高了很多，所以推荐大家使用cli3.X版本去搭建自己的项目，通过这篇教程帮大家熟悉使用vue cli3去搭建vue项目。 安装 1.卸载旧版本cli 如果你之前都是基于vue-cli2.X,你需要先卸载它： #卸载vue-cli npm unin
VUE3.0学习笔记（一）-创建VUE项目
lcxac的博客
02-08 989
创建VUE3.0项目，前端小白请多多关照
form-design-next:动态表单页面设计-自动生成页面--vue3.0版本
03-31
动态表单页面设计-Vue3.0版本 Vue3 +打字稿+ Element-Plus重构中... 自动生成H5页面，一些简单的页面无需前端参与，运营人员自己新建修改即可 QQ交流群： 扫码加群： 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅
Vue3.0及以上版本创建项目步骤
许魁的博客
01-24 1496
一共6个步骤： 1，检查Node.js版本； Vue CLI 需要Node.js8.9 或更高版本 (推荐 8.11.0+)；如果低于这个版本卸载后去Node官网重新下载安装最新版； Node中文网下载页面链接 2，检查Vue-cli版本; Vue CLI 的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x...
vue3子页面创建及使用
m0_64590669的博客
03-02 3473
子页面创建及使用
VUE3.0添加一个页面的步骤
fghfghhgjgj的博客
03-08 5408
1、VUE添加页面步骤： 第一步：创建新页面。（在views文件夹下创建TestView.vue -> 2、第二步：定义组件。（在component文件夹下创建Test.vue组件） -> 3、第三步：导入TestView组件。(在router>index.js中) ->第四步：配置 TestView 路由(router>index.js中)。-> 4、第四步：配置完成后还需要在 App.vue 中增加链接到 Test.vue 的路由。-> 5、第五步：挂载到App
vue3.0基础--图形页面构建项目
03-31 659
1.打开cmd或者终端输入vue ui出现以下页面 安装好之后： 点击运行后会自动编译： 运行是没有问题的： 安装vuetify: 再次运行会出现以下页面： 这就是使用图形页面创建项目和安装插件，建议以终端形式运行项目。 ...
使用vue-cli3 vue ui图形化界面页面空白
renlang7090的博客
01-04 6206
重装chrome 浏览器能解决这个问题
vue3.0页面模板-示例
weixin_44867717的博客
09-24 3077
vue3.0页面模板-示例 index.vue <template> <!-- vue3.0模板 --> <div v-if="isLook"></div> </template> <script lang="ts"> import { defineComponent, getCurrentInstance, onMounted, reactive, ref, toRefs,
vue UI 基于图形化界面快速创建vue项目
木易的博客
08-11 2120
Vue CLI 3新版本发布后，我们现在快速创建一个vue项目的话，更加简单了，Vue UI。一个可视化图形界面方便你去创建、更新和管理项目的方方面面。 今天，我会跟你一一介绍Vue UI的beta版本中可用的功能。 1 首先我们可以先检查下自己的vueCli版本是否在3.0以上，如果没有的话我们可以升级或者重新安装都可以，全局安装，只安装一次就行，检查版本的形式如下： 2 安装的方式如下，可以根据自己的需要 选择以下的任何一种方式都可以 npm install -g @vue/cli # .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coding101

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值