使用vue ui创建vue项目(基于图形化界面的方式)

前提：

1.打开cmd ，安装vue脚手架

 npm install -g @vue/cli

2.若之前安装过无需重新安装；直接在cmd 中输入vue ui

若输入vue ui 后无反应，则是安装的脚手架版本太低，直接升级脚手架版本就行；输入 cnpm i -g @vue/cli

安装完成后重新输入vue ui

等待自动打开浏览器；

创建项目步骤：

①点击创建

②选择目录后,点击在此创建项目
③输入项目名称，填写git仓库建议 init project ，其他项默认

④点击下一步，选择默认配置，或手动配置；若是第一次创建项目选择手动配置；
⑤选择功能；选择Bable,Router,Linter及使用配置文件四项开启，点击下一步

⑥相关配置；点击创建项目,保存为新预设（方便下次直接使用），点击保存预设并创建项目；

⑦等待项目创建完成（首次创建较慢）
⑧配置element-ui库（以下为视频截图），添加插件–搜索到后选中，右下角点击【安装】

配置插件设置：

⑨配置axios库：点击【依赖】–【安装依赖】

⑩点击到【任务】，点击运行

运行成功后显示编译成功，点击启动app：

使用vue ui创建vue项目(基于图形化界面的方式)相关推荐

基于图形化界面创建Vue项目
记录:267 场景:基于图形化界面创建Vue项目,便于后续查阅. 环境:Node.js v14.17.3 1.打开cmd控制台运行命令:vue ui 截图: 2.项目仪表盘截图: 3.Vue 项目 ...
PC后台管理（基于图形化界面自动安装教程）
基于vsode开发的一套后台管理技术选项一.项目初始化 1.1前端项目初始化步骤 1.2后台管理的环境安装安装配置 1.3登录和退出的功能 1.4主页把跟新后的代码提交到马云上去三级目录技术 ...
Element-UI 的基本使用||基于图形化界面自动安装
Element-UI 的基本使用 Element-UI:一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库. 官网地址为: http://element-cn.eleme.io/ ...
图形化界面扫雷(C语言+easyx实现，多图教学)
扫雷前言准备工作 EasyX的下载一些准备知识头文件的引用图形化界面的创建图形化界面简介图片加载与放置图片鼠标操作提示框其它的准备知识思路分析代码实现准备工作初始化游戏的函 ...
Linux----dos界面 | 图形化界面切换
目录你的系统不一定能切换图形化界面,为什么呢? 下载CentOS时,有很多可选版本,下面对初学者做下简单介绍: 什么时候会不能切换? 看效果: dos界面切换后图形化界面切换方式多种系统默认以 ...
vue3 项目创建(UI图形化界面方式，可视化操作Vue项目，vue ui)
vue3 项目创建 (UI图形化界面方式,可视化操作Vue项目,vue ui) 目录一.图形化界面方式搭建vue3 项目前提条件 1.检查node 和 @vue/cli 版本信息 2.升级你的 No ...
使用UI创建vue项目并添加element ui和axios
目录简介 Vue简单安装说明项目创建步骤总结简介因为最近一个项目需要使用SPA的方式,而前端选择使用vue来实现.所以最近重新看了下vue的相关知识,发现最新的vue项目可以在web中使用界 ...
Vue脚手架创建的项目的启动流程
Vue脚手架创建的项目的启动流程当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析. 入口分析首先从package.json中的脚本配置来看,np ...
VS Code安装VUE及创建VUE项目
VS Code安装VUE及创建VUE项目一.在搭建vue的开发环境之前,先下载node.js,vue的运行是要依赖于node的npm管理工具来实现,下载地址:http://nodejs.cn 二.n ...

使用vue ui创建vue项目(基于图形化界面的方式)

前提：

创建项目步骤：

使用vue ui创建vue项目(基于图形化界面的方式)相关推荐

最新文章

热门文章