vue ui的安装步骤以及使用详解

 更新时间:2022年08月12日 11:15:27   作者:DangR-Jisoo  
最近公司开发一个项目,采用的前后端分离的方式,前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,下面这篇文章主要给大家介绍了关于vue ui的安装步骤以及使用的相关资料,需要的朋友可以参考下

vue ui是什么?

简单来说,vue ui是一个可视化图形界面,方便你去创建、更新和管理vue项目,包括下载router,vuex,axios,elementui等插件,配置好一些属性以及依赖关系,方便我们使用,我个人第一次接触它就感觉非常非常非常智能和强大

配置步骤

1.安装Vue CLI,因为vue ui是在Vue CLI基础上封装的

npm install -g @vue/cli

2.打开C:\Users*xxxx*\AppData\Roaming\npm,看看有没有下图框出的文件

3.将C:\Users*xxxx*\AppData\Roaming\npm添加到环境变量中

4.双击vue.cmd,以管理员身份打开终端,输入vue -V,若出现版本信息,说明安装成功

5.为了快捷起见,比如你想在桌面创建一个vue项目,提前在桌面建好文件夹,复制路径,在终端上切换到你复制的路径下,这样会比较快

6.输入命令vue ui,此时浏览器会跳转localhost:8080,然后你就可以新建你的项目了,如下图所示

选择预设,根据你的项目需要的插件来选择,这里选择手动,如下图所示

根据咱们的业务需求来选择配置,比如Router,Vuex,CSS预处理器是我们经常用到的东西,我们就可以选择它们,如下图所示

在上图你可以保存为你的预设,也可以不保存,直接创建项目,完成之后如下图所示

然后你用编译器打开项目就可以发现,之前选择的router,vuex以及less全部帮我们装好了,就可以直接使用了,是不是很方便?下载新的插件

我们的项目中难免会用到elementui以及axios,我们直接安装就可以使用了

注意:只要使用到了vue ui,我们在终端打开的vue ui就不能关掉了,也就是说不能关闭终端,而且要以管理员身份运行

总结

到此这篇关于vue ui安装步骤及使用的文章就介绍到这了,更多相关vue ui安装使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • uniapp嵌套webview无法返回上一级解决方式

    uniapp嵌套webview无法返回上一级解决方式

    uniapp是一款非常强大的跨平台开发框架,它可以让我们只编写一份代码,就能在多个平台上运行,这篇文章主要给大家介绍了关于uniapp嵌套webview无法返回上一级的解决方式,需要的朋友可以参考下
    2024-05-05
  • hansontable在vue中的基本使用教程

    hansontable在vue中的基本使用教程

    handsontable是目前在前端界最接近excel的插件,可以执行编辑,复制粘贴,插入删除行列,排序等复杂操作,这篇文章主要介绍了hansontable在vue中的基本使用,需要的朋友可以参考下
    2022-10-10
  • Vue3中使用setup通过ref获取子组件的属性

    Vue3中使用setup通过ref获取子组件的属性

    这篇文章主要介绍了Vue3中使用setup通过ref获取子组件的属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    这篇文章主要介绍了vue 表单绑定与组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 基于Vue3+Element Plus 实现多表单校验demo

    基于Vue3+Element Plus 实现多表单校验demo

    表单校验在日常的开发需求中是一种很常见的需求,通常在提交表单发起请求前校验用户输入是否符合规则,通常只需formRef.value.validate()即可校验,本文给大家介绍基于Vue3+Element Plus 实现多表单校验demo,感兴趣的朋友一起看看吧
    2024-06-06
  • Vue全局监测错误并生成错误日志实现方法介绍

    Vue全局监测错误并生成错误日志实现方法介绍

    在做完一个项目后,之后的维护尤为重要。这时,如果项目配置了错误日志记录,这样能大大减少维护难度。虽然不一定能捕获到全部的错误,但是一般的错误还是可以监测到的。这样就不用测试人员去一遍一遍复现bug了
    2022-10-10
  • vue面试之new Vue的时候到底做了什么

    vue面试之new Vue的时候到底做了什么

    这篇文章主要介绍了vue面试之new Vue的时候到底做了什么原理及vue加载流程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

    在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

    这篇文章主要介绍了在vue中使用axios实现post方式获取二进制流下载文件的相关资料,需要的朋友可以参考下
    2019-12-12
  • Vue的Class与Style绑定的方法

    Vue的Class与Style绑定的方法

    本篇文章主要介绍了Vue的Class与Style绑定的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue中post请求报400的解决方案

    vue中post请求报400的解决方案

    这篇文章主要介绍了vue中post请求报400的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论