怎么使用 vue ui 可视化工具创建一个项目

简介: 怎么使用 vue ui 可视化工具创建一个项目

1、如果你安装了 vuecli3.0,在控制台输入 vue ui,然后回车

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi83RTNFQzkzREFDMDQ0REFGODBCRjQ0OUM5MTNFNzlGMA.png


2、成功之后会自动打开浏览器,进入可视化操作页面


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi9FRTkxOTY5RkIxQkY0NUI2QjkyRkMyQzI2QjVDQ0EwRQ.png


3、点击创建,选择在 vuex 文件夹下面,点击在此创建新项目


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi9DNkM0MkJCQjM3MzE0REQxOTQwOEFEQUU5MkQyQjlBQQ.png



4、输入项目文件夹名称,选择包管理器 npm ,添加初始化 git 描述,然后点击下一步


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi8zNzU0RDczQzEwMDA0NDhCQkYzMTg2RUU1MjI3MDM2RA.png




5、成功之后,我们选择手动配置项目,然后下一步

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi81QjIzNUYxMERFQzk0OTREQkU0MDhBMjQ3OTVCMTAyQQ.png



6、我们手动配置添加 babel, Vuex, Linter / Formatter, 使用配置文件 这四项开启,然后下一步


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi9GOEQ5MjRFNkQ5MTc0NTgwQjE1OURCQkQ3NDFFOUJDNw.png



7、选择 ESLint + Standard config


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi9FMjIxNkQyMzIzRjc0OEMwQjg1NTdCNUFCRTI1MzBCRA.png


8、选择不预存


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi84NUFEOEIyNTNDMDQ0NjQwODZDMjk2QjdCREI3M0FEMA.png




如果你想预设,比如命名为 kaimo 你下次创建项目的时候会在预设中出现这个


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi9CRjUzQ0E4QzRENDU0OUQxODQzNDgyMDFFREZDRDU0Ng.png



9、然后你就会看到正在创建项目


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi85RjdFQjdDN0UyN0Q0M0EyOTdDOEE0MTVGNDBBMUM1Qw.png



10、稍等片刻,安装好之后,就会来到项目仪表盘

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi83MEY1RDhGMDU3OUI0NkM5OEVFNEI3NzFDMDM2NThFMw.png



11、然后点击任务,点击serve,点击运行,启动 app


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi80QTRDRDQwQjUzNzQ0Q0Y2QTgxQjA5M0FDQ0E3NjcyQw.png



12、启动 app,就会打开一个浏览器窗口


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi80MTY2MzRBOTM5Mzc0NkJEQTgxREExNUI0ODg1MTY3MA.png


13、这样就基本完成了一个项目的创建到启动过程,我们用 vscode 编辑器打开文件夹 vuex 就可以看到


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS82ZmZlZDE0YzY5ODc5NzRkODk0NDY3NTQ4YTU3YThmZi9CNDY0Mzg4QzY2N0E0Qjc1QjZFQjExMDZCOTQ5M0NEQg.png





















目录
相关文章
|
9天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
54 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
10天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
57 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
8天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
46 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
12天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
55 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
2月前
|
数据处理
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
本篇将带你实现一个评分统计工具,用户可以对多个选项进行评分。应用会实时更新每个选项的评分结果,并统计平均分。这一功能适合用于问卷调查或评分统计的场景。
168 65
|
11天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
29天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
150 1
|
2月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
521 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
1月前
不要再责怪你的UI设计师为什么没有用rp?ps?figma?sketch?xd?如何免费转换非在线工具收费转换-本文将教会你常规ui设计源文件格式相互之间如何转换并且保持矢量图和标注注释问题-优雅草央千澈
不要再责怪你的UI设计师为什么没有用rp?ps?figma?sketch?xd?如何免费转换非在线工具收费转换-本文将教会你常规ui设计源文件格式相互之间如何转换并且保持矢量图和标注注释问题-优雅草央千澈
41 1
|
3月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。

热门文章

最新文章