热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vuetify入门

Vuetify入门,Go语言社区,Golang程序员人脉社
Vuetify入门

Vuetify是世界上最受欢迎的Vue.js框架,用于构建功能丰富,快速的应用程序。


Vue CLI安装

Vue CLI是下一代cli工具,用于抽象化构建应用程序的复杂性。当您使用Vue CLI启动应用程序时,无需繁琐的升级过程

1,查看你本地vue 的版本: vue --version,我本地的是2.9.6.在这里插入图片描述

2,利用命令创建 my-app 应用**:vue create my-app
在这里插入图片描述
它提示我这不是最新的版本,至少需要vue-cli 3 以上的才可以,按照提示安装最新的vue-cli。

3,卸载旧的vue-cli ,执行命令 npm uninstall -g vue-cli
在这里插入图片描述
4,安装最新的vue-cli,执行命令 npm install -g @vue/cli
在这里插入图片描述
5,查看安装后的版本:vue --version
在这里插入图片描述

利用Vue CLI 创建项目

如果尚未使用Vue CLI创建新的Vue.js项目,则可以键入以下命令:vue create my-app,我这里创建的项目名称叫"ap".
在这里插入图片描述
在这里插入图片描述
创建成功之后可以看到当前目录下多了一个项目应用ap;
在这里插入图片描述
进入目录下 cd ap,查看项目文件结构 dir,如下图:
在这里插入图片描述

安装vuetify插件

1,通过命令安装,进入到项目目录下,安装vuetify插件,vue add vuetify
在这里插入图片描述

2,通过ui界面安装vuetify,执行命令 vue ui
在这里插入图片描述

系统会在浏览器弹出UI界面,选择你要安装的项目ap,导入此项目,再插件界面搜索vuetify插件,发现已经提示“已安装”,如果没有安装的可以通过此方法安装。
在这里插入图片描述


导入到Hbuilder开发工具

1,通过Hbuilder导入项目ap;
在这里插入图片描述

2,运行项目ap,通过命令 npm run serve
在这里插入图片描述

3,在浏览器访问应用首页。

在这里插入图片描述



推荐阅读
  • 解决Only fullscreen opaque activities can request orientation错误的方法
    本文介绍了在使用PictureSelectorLight第三方框架时遇到的Only fullscreen opaque activities can request orientation错误,并提供了一种有效的解决方案。 ... [详细]
  • 如何在Linux服务器上配置MySQL和Tomcat的开机自动启动
    在Linux服务器上部署Web项目时,通常需要确保MySQL和Tomcat服务能够随系统启动而自动运行。本文将详细介绍如何在Linux环境中配置MySQL和Tomcat的开机自启动,以确保服务的稳定性和可靠性。通过合理的配置,可以有效避免因服务未启动而导致的项目故障。 ... [详细]
  • 在软件开发过程中,经常需要将多个项目或模块进行集成和调试,尤其是当项目依赖于第三方开源库(如Cordova、CocoaPods)时。本文介绍了如何在Xcode中高效地进行多项目联合调试,分享了一些实用的技巧和最佳实践,帮助开发者解决常见的调试难题,提高开发效率。 ... [详细]
  • Android 构建基础流程详解
    Android 构建基础流程详解 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 为了在Hadoop 2.7.2中实现对Snappy压缩和解压功能的原生支持,本文详细介绍了如何重新编译Hadoop源代码,并优化其Native编译过程。通过这一优化,可以显著提升数据处理的效率和性能。此外,还探讨了编译过程中可能遇到的问题及其解决方案,为用户提供了一套完整的操作指南。 ... [详细]
  • 在 CentOS 7 系统中安装 Scrapy 时遇到了一些挑战。尽管 Scrapy 在 Ubuntu 上安装简便,但在 CentOS 7 上需要额外的配置和步骤。本文总结了常见问题及其解决方案,帮助用户顺利安装并使用 Scrapy 进行网络爬虫开发。 ... [详细]
  • Vue CLI 初始化 Webpack 项目时,main.js 文件是如何被调用的? ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • 在尝试对 QQmlPropertyMap 类进行测试驱动开发时,发现其派生类中无法正常调用槽函数或 Q_INVOKABLE 方法。这可能是由于 QQmlPropertyMap 的内部实现机制导致的,需要进一步研究以找到解决方案。 ... [详细]
  • Oracle ERP系统用户指南:涵盖MRP模块详细操作说明
    《Oracle ERP系统用户指南》详细介绍了MRP模块的操作流程与功能。该手册涵盖了从基础设置到高级应用的全方位指导,旨在帮助用户高效地管理和优化物料需求计划。文档编号、受控状态及生效日期等信息均在手册中明确标注,确保内容的准确性和时效性。编制人忻滢对内容进行了全面审核与确认,以保障用户的使用体验。 ... [详细]
  • 您的数据库配置是否安全?DBSAT工具助您一臂之力!
    本文探讨了Oracle提供的免费工具DBSAT,该工具能够有效协助用户检测和优化数据库配置的安全性。通过全面的分析和报告,DBSAT帮助用户识别潜在的安全漏洞,并提供针对性的改进建议,确保数据库系统的稳定性和安全性。 ... [详细]
  • 优化Vite 1.0至2.0升级过程中遇到的某些代码块过大问题解决方案
    本文详细探讨了在将项目从 Vite 1.0 升级到 2.0 的过程中,如何解决某些代码块过大的问题。通过具体的编码示例,文章提供了全面的解决方案,帮助开发者有效优化打包性能。 ... [详细]
  • 在Eclipse中提升开发效率,推荐使用Google V8插件以增强Node.js的调试体验。安装方法有两种:一是通过Eclipse Marketplace搜索并安装;二是通过“Help”菜单中的“Install New Software”,在名称栏输入“googleV8”。此插件能够显著改善调试过程中的性能和响应速度,提高开发者的生产力。 ... [详细]
  • 如何在Docker环境中顺利运行Node.js应用程序? ... [详细]
author-avatar
蔡志哲皇宇
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有