教你如何通过图形化界面的方式创建Vue-cli工程

最新推荐文章于 2023-12-07 15:10:01 发布
最新推荐文章于 2023-12-07 15:10:01 发布
阅读量221 收藏
点赞数
分类专栏： vue详解 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CNCDXX_88/article/details/111790573
版权

第一步：通过win+R，然后输入cmd打开黑窗口
在这里插入图片描述

第二步：输入vue ui 打开vue可视化页面
在这里插入图片描述
成功后浏览器页面会显示
在这里插入图片描述
第三步：选好项目放置在你的电脑里具体盘符处
在这里插入图片描述
第四步：接下来按照图示操作即可
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
至此一个新的Vue-cli项目创建好了

对于创建好的项目，下次再使用时需要到项目所在文件夹中打开终端
比如：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样用着就非常方便了

keep thinking
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli图形化管理界面创建单文件组件项目
tfsun的博客
09-14 498
为了保证能够使用vue.js单文件组件，需要安装以下环境。 安装 `npm` `npm` 全称为 `Node Package Manager`，是一个基于`Node.js`的包管理器，也是整个`Node.js`社区最流行、支持的第三方模块最多的包管理器。 npm -v 由于网络原因 安装 `cnpm` npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 `vue-cli` cnpm install -g @vue/cli
vue-cli3.0 使用图形化界面创建和管理项目
Gaia_qi的博客
10-26 657
1.打开命令提示行输入vue ui vue ui 2.点击创建选择要存放的位置，点击在此创建项目 3.填写项目信息，点击下一步 4.点击默认，创建新项目 5.创建项目，需要等待一下 6.到这里项目就创建成功啦 7.启动一下看下效果 8.启动成功 ...
创建vue项目：vue脚手架安装、vue-cli安装，vue ui界面创建vue工程（vue2/vue3），安装vue、搭建vue项目开发环境（保姆级教程二）
最新发布
zhangfuping123456789的博客
12-07 1689
vue、vue-cli、npm、node、vue ui
Vue-CLI-3.0图形化界面初试
liyoro的专栏
04-11 871
环境 系统版本 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 图形...
@vue/cli4--使用图形化界面创建项目--方法/实例
IT利刃出鞘的博客
06-22 1782
本文用实例来介绍vue-cli4如何使用图形化界面来创建项目。
Vue.js入门之Vue CLI和图形化界面Vue Ui的使用
Emoji的博客
04-27 1273
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过@vue/cli搭建交互式的项目脚手架。 通过@vue/cli+@vue/cli-service-global快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的配置文件进行配...
使用vue-cli3+typescript的项目模板创建工程的教程
10-15
1. 使用 `vue ui` 命令启动Vue CLI的图形化界面。 2. 在图形化界面中，选择“创建新项目”。 3. 选择“typescript”预设模板，这将为你创建一个包含TypeScript支持的项目结构。 4. 配置项目名称、位置等信息，然后...
一份超级详细的Vue-cli3.0使用教程【推荐】
12-04
Vue-cli 3.0 引入了图形化界面 (GUI)，让开发者可以通过界面操作创建、管理、运行项目，这对于不熟悉命令行的用户非常友好。 4. **第一次创建项目**： 使用 `vue create` 命令创建项目，例如 `vue create hello-...
vue-cli3脚手架的配置及使用教程
10-18
6. **图形化界面**：Vue CLI 3 还提供了一个图形化的用户界面，让不熟悉命令行的开发者也能便捷地创建和管理项目。 安装 Vue CLI 3 首先需要 Node.js 环境，至少是 8.9 版本，推荐 8.11.0+。如果已有旧版本的 Vue ...
webstorm建立vue-cli脚手架的傻瓜式教程
10-14
Vue CLI是官方提供的一个命令行工具，用于简化项目初始化和设置过程，而WebStorm作为一个强大的JavaScript IDE，提供了图形界面来辅助这一流程。 首先，启动WebStorm并打开“新建项目”对话框。在这个过程中，务必...
基于 图形化界面 的方式，创建 新版 vue 项目
weixin_44549096的博客
02-09 371
基于 图形化界面 的方式，创建 新版 vue 项目 1、使用 vue ui 打开 图形化页面 2、选择存放项目的目录 3、创建新的项目 4、询问是否进行相关的配置 5、选择功能 6、选择配置 7、是否将刚选择的配置，保存为模板 8、创建成功后 9、点击 ‘下拉框’中的 ‘Vue项目管理器’ ，查看所有创建的项目 10、查看插件、依赖、配置 11、运行项目 点击 ‘运行’，项目进行编译 等 序号3 加载成功后 点击 ‘启动app’ 1
vue-design 桌面端页面可视化构建程序
weixin_34248258的博客
03-18 2342
vue-design 用Vue和Electron开发最好的页面可视化构建程序Your star is the greatest encouragement to me. 功能 使用electron构建的桌面端应用 通过简单的配置引入UI组件库 通过可拖拽、可编辑的组件设计页面 可编辑页面css 保存为.vue文件 保存/导入一个项目 ...
Vue CLI的UI界面（可视化操作Vue项目）
庸人方自扰，自在就好
12-02 8050
一、打开我们的Vue项目 如果当时是使用vue init webpack my-project创建Vue项目的，打开Vue项目是先用cd切换到项目文件夹，再使用“npm run dev”或者“npmrunstart”命令打开。如果是使用vue create my-project创建的Vue项目，就只能使用“npm run serve”命令打开项目。这是我目前的发现。 二、打开Vue-Cli的UI界面 在已经打开了git bash的情况下，再双击git bash便可打开第二个git bash，然后切..
使用图形化界面创建vue项目
博客的博客
02-27 3047
在命令行窗口输入vue ui 按下回车后会自动在浏览器中打开图形化界面 点击创建可以选择创建项目的文件夹 点击在此创建新项目 只用填写项目名称和git的存储信息就好了 选择预设，第一次的话请手动 第一项是问你是否使用历史模式的router 第二项是问你lint的配置文件 第三项是问你什么时候校验语法 创好了 很简单 ...
【Vue】Vue全家桶（八）vue-cli脚手架 +图形可视化创建Vue项目+命令行创建Vue项目
Better_Xing的博客
06-04 1142
【Vue】Vue全家桶（八）vue-cli脚手架 +图形可视化创建Vue项目+命令行创建Vue项目
Vue使用图形化界面创建项目
12november的博客
05-19 2716
通过vue ui命令。以图形化界面创建和管理项目。 1.打开要创建项目的路径 2.键入vue ui，单击回车，此时会在默认浏览器中默认打开图形化界面 单击创建，会显示该文件下 的文件： 点击创建一个新的项目，包管理器选择npm，也可选其他。然后单击下一步，在预设中选择默认，然后创建项目： ...
Vue 2.x折腾记 - (11) @Vue/Cli 3.0.0 图形化项目管理,相当人性化
热门推荐
CRPER
06-16 1万+
前言 @vue/cli v3从开始到现在已经经历了四个月的迭代(目前RC2), 除了终端初始化的姿势,还引入了一个新的项目初始化姿势; Web端的初始化,体验了一下,效果很不错;所以记录一下. 后方多图,感兴趣的可以瞧瞧,不感兴趣的请止步,免得浪费你的时间,谢谢.. 安装 npm i -g @vue/cli 常规命令 大体中文注释下 Usage: vue...
web前端：vue-cli3后图形化UI界面创建项目深度剖析
wangxi06的专栏
03-11 653
1.项目初始化-手动自定义安装 安装依赖 npm install或者cnpm install 初始化项目 npm init -f或者cnpm init -f （-f自动安装模式，全部默认，包括工程名等...） 安装模板组件 npm install vue-router --save-dev或者npm install vue-router -D（生产/开发环境-D=--save...
Vue脚手架
FormAda的博客
10-14 334
1.Vue脚手架的基本用法 vue脚手架用于快速生成vue项目基础架构 使用步骤： （1）安装vue脚手架 npm install -g @vue/cli （2）基于脚手架创建vue项目 交互式命令行创建： 项目名（自己取） 选择第二个 单击空格选中后会标记*，表示要安装这一项 创建项目完毕后进入该项目目录，运行命令 npm run server ,运行项目 图形化界面创建： 输入命令 npm ui 点击创建，进入项目创建面板 点击再此创建新项目 填写完项目名称和初始化g
可视化创建vue-ui项目
08-20
要可视化创建Vue UI项目，你可以使用Vue CLI提供的图形界面。Vue CLI是一个官方提供的脚手架工具，可以帮助快速创建Vue项目，并且提供了许多开箱即用的功能。 以下是使用Vue CLI可视化创建Vue UI项目的步骤： 1. 安装Vue CLI：首先，确保你已经安装了Node.js和npm。然后，可以在终端中运行以下命令来全局安装Vue CLI： ``` npm install -g @vue/cli ``` 2. 启动可视化界面：在终端中运行以下命令启动Vue CLI的可视化界面： ``` vue ui ``` 运行后，会自动打开浏览器并进入Vue CLI的可视化界面。 3. 创建新项目：在Vue CLI可视化界面中，点击左侧导航栏中的"创建"按钮。然后，你可以选择创建一个新项目或从现有的Git存储库导入项目。 4. 配置项目：在创建新项目时，你需要填写一些基本配置，如项目名称、保存路径等。此外，还可以选择使用默认预设或手动配置一些选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值