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





















目录
相关文章
|
10月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
485 0
|
11月前
|
人工智能 安全 程序员
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
1332 12
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
682 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
1095 4
|
前端开发 数据安全/隐私保护 开发者
FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
嗨,大家好,我是小华同学。今天为大家介绍一个轻量级、响应式的前端UI框架——FirstUI。它提供丰富的组件库,包括按钮、输入框、下拉菜单等,帮助开发者快速构建美观、功能丰富的用户界面。FirstUI的核心理念是“简单、快速、高效”,适合各种Web应用开发,如企业网站、电商平台和个人博客。其体积小、加载快,支持响应式设计,并且易于定制。FirstUI拥有活跃的社区支持,开发者可以轻松找到帮助并分享经验。欢迎关注我们,获取更多优质开源项目和高效工作学习方法。
587 0
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
790 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
581 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
648 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
501 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战

热门文章

最新文章

下一篇
开通oss服务