vue ui页面创建vue新项目

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

#vue.js #html5 #node.js #前端

本文详细指导如何使用Vue CLI创建新项目，包括选择手动配置、安装Element UI插件、axios和less依赖，并演示了如何运行和启动应用。

一、新建vue项目

  • 首先新建空文件夹
    在这里插入图片描述

  • 然后cmd到该文件夹下 输入vue ui打开web界面创建项目
    在这里插入图片描述

  • 点击在此创建新项目
    在这里插入图片描述

  • 输入文件名 选中npm
    在这里插入图片描述

  • 点击手动 然后下一步 选中 Babel Router 以及 使用配置文件

在这里插入图片描述

  • 点击创建项目 不保存预设
    在这里插入图片描述

  • 此时创建好 为新项目页面
    在这里插入图片描述

  • 点击左侧插件 输入 element然后选中第一个 安装
    在这里插入图片描述

  • 安装完一定要点击 完成安装
    在这里插入图片描述

  • 点击左侧依赖 安装依赖
    在这里插入图片描述

  • 我这里安装的是axios、less、less-loader依赖
    在这里插入图片描述

  • 最后一步运行vue 点击任务 选中serve 点击运行
    在这里插入图片描述

  • 启动成功 点击启动app
    在这里插入图片描述

  • 弹出这个页面即项目创建成功

在这里插入图片描述

精选资源
基于Vue 3.0的pad界面UI混合开发设计源码
09-28
本项目的核心即是基于Vue 3.0的pad界面UI混合开发设计源码，其涵盖了多个方面的技术和文件类型，旨在为开发人员提供一套完整的设计框架。 在设计方面，该项目包含了19个Vue组件，这些组件是构建用户界面的基础单元...
精选资源
vue+element-ui后台完整系统
06-25
因此，在开发过程中，除了使用Vue和Element UI这两个核心框架外，开发者可能还需要使用其他工具或库，比如Vuex进行状态管理，Vue Router进行页面路由管理等。 一个基于Vue和Element UI的后台完整系统为开发者提供了...
vue+elementUI管理系统，页面源代码
11-10
vue2+elementUI后台管理系统，页面源代码，src和static目录
vue脚手架通过ui界面方式创建项目
搬砖猴哥
06-13 6977
我们vue脚手架提供了图形界面操作项目，比之前通过命令操作的形式更加简单，下面我就来总结一下图形界面创建项目的基本步骤 1、首先保证全局安装@vue/cli工具 ，没有自行下载 cnpm i @vue/cli -g 2、推荐下载yarn包管理器 cnpm i yarn -g 3、接下来我们就可以在自己的电脑里创建项目，找到电脑某个位置，在此文件夹按住shift同时右键，在此处打开cmd命令窗口...
如何快速上手DevExtreme Vue：打造高颜值Vue UI界面的终极指南
最新发布
gitblog_00904的博客
10-29 368
DevExtreme Vue是一套专为Vue.js框架设计的企业级UI组件库，提供丰富的数据可视化控件和交互式表单元素，帮助开发者快速构建响应式、高颜值的Web应用。无论是复杂的数据表格、动态图表还是精美的表单组件，都能通过简单配置实现专业级效果，让前端开发效率提升300%！ ## ???? 1分钟极速安装：三步开启开发之旅 ### 环境准备要求 确保系统已安装Node.js（v14+推荐）和np...
使用vueUI创建新项目
00年女程序员分享自己的学习笔记
07-07 1460
使用vueUI创建新项目cmd打开命令窗口，输入vue ui打开vue可视化面板，然后 点击创建 选择一个路径，点击在此创建 输入项目名，点击下一步 选择手动配置 选择这四项，下一步 选择2.x 点击创建 app.vue文件如下 router里面的index.js文件如下： 删除views文件夹（里面有两个文件：HomeView和AboutView）删除components中的HelloWorld.vue文件components文件夹下创建文件...
用vue ui 创建项目
Pyc的博客
03-18 3448
1、先安装vue cli npm install -g @vue/cli 2、打开命令行输入vue ui
vue通过vue ui 创建项目
懒惰的小妖
06-22 507
进入到指定的工作空间后，通过vue ui 来启动Vue 图形管理器，这种情况下是小编还没有安装； 1.安装Vue cli cnpm install -g @vue/cli 2. 查看版本 vue -V 3.在命令行运行，就会出现图形化管理 vue ui 4. 创建 选择，创建项目不保存预设 5.创建项目后出现此界面（小编创建项目的时候，第一次创建一直是正在创建项目，但并没有创建成功，只好删掉，重新创建，创建成功） 6.选择插件，例如vue-..
Vue项目创建及配置
L14173233的博客
08-07 2079
Vue是一种用于构建用户界面的JavaScript框架。它采用了一种称为MVVM（Model-View-ViewModel）的架构模式。MVVM是一种将用户界面与业务逻辑和数据分离的设计模式。Model（模型）：表示应用程序的数据和业务逻辑。在Vue中，模型通常是一个JavaScript对象。View（视图）：表示用户界面。在Vue中，视图通常是使用HTML模板构建的。ViewModel（视图模型）：充当模型和视图之间的中间层。
vue3，vite项目最基础示例，vue-router+naive-ui+mock.js
12-09
在项目创建之初，我们会使用Vite来搭建一个基础的Vue3项目结构。Vite通过现代浏览器原生支持的ESM（ECMAScript Modules）提供了一种更为简洁高效的开发环境。在创建过程中，我们将通过Vite的命令行工具来初始化项目...
创建Vue项目
ITKidKid的博客
06-21 708
使用vite创建vue项目
使用可视化的Vue项目管理器（Vue UI）来创建、开发和管理你的项目
weixin_45131680的博客
06-20 3003
这一步在选择项目所需的配置项时，就很直观了：页面内也有很多提示和查看详情的入口，相较于之前命令行的方式，就很银杏了，哈哈Babel；Router；选择Vue语法版本（2.x / 3.x（Preview））；选择路由模式（history mode / hash mode）；简单选择2.x和hash mode，点击创建项目！用完这一圈Vue UI下来，感觉比命令行直观太多了。不过对于程序猿来说，虽然Vue UI是很方便，可是耐不住命令行的魔力呀~
Vue ui 创建vue项目，详细使用攻略。
苦逼打工人的博客
04-30 2877
Vue ui 创建vue项目，详细使用攻略。附带常用功能使用教程
[保姆级教学]使用Vue ui创建一个完整的vue项目
qq_63586399的博客
01-13 2920
通常来说常选泽：Babel（默认必选）、Router（路由）、Vuex（一种实现组件之间数据共享的技术）、Linter（默认必选）、config。1. 安装本地 node_modules 文件夹中的依赖项：npm install。随后用VSCode打开项目文件，可以在vue ui的Tasks栏下打开项目的服务。首先在cmd中输入vue ui指令以在本地打开vue ui页面。进入详细的项目配置界面，初始化Git仓库非必选，看个人需求。在Output中找到项目的本地地址并打开，进入到vue项目管理器。
用vue ui创建新的vue项目
weixin_44534951的博客
11-24 2620
用vue ui创建新的vue项目 vue3.0以上才会有vue ui功能 一、创建新vue项目 1.在命令行里面输入vue ui 2.进入创建新项目页面 输入项目名称，填写git初始化提交信息，下一步 3.预设面板 可以选择以前创建过的预设，也可以重新手动配置项目，下一步 4.进入功能面板，选择项目所需要的功能 一定要有Babel和Linter / Formatter(代码格式校验)、...
vue ui 创建项目
m0_46610349的博客
10-11 3096
如何在命令提示符里通过 vue ui 创建项目
使用vue ui创建vue项目(基于图形化界面的方式)
南野子
05-23 5939
前提： 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项目
liudachu的博客
09-25 985
在命令行界面输入vue ui 进入Vue项目管理界面 点击创建，选择创建项目的地址 输入项目名称，点击下一步 选择手动配置项目，下一步 选择第一个，和以下两个，(根据项目需要进行选择) 选择使用历史mode 选择不保存预设 创建项目 ...
Vue2学习（四）：使用Vue UI创建项目
阿标的博客
06-01 559
使用Vue UI创建项目
使用vue ui创建新项目
12-27
### 如何使用 Vue UI 创建新项目 #### 准备环境 为了能够顺利使用 `vue ui` 工具来创建新的 Vue 项目，首先需要确保环境中已经正确安装了 Vue CLI。可以通过以下命令全局安装 Vue CLI： ```bash npm install -g @...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值