怎么使用 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





















目录
相关文章
|
3月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
131 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
3月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
223 2
|
3月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
42 3
|
7天前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
91 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
2月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
3月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
156 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
3月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
24 7
|
2月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
3月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
45 6