vuetify project hello-world

最新推荐文章于 2024-08-10 15:49:03 发布

原创最新推荐文章于 2024-08-10 15:49:03 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

学习笔记专栏收录该内容

70 篇文章

订阅专栏

本文介绍了如何使用vue-cli创建Vue项目，配置Vuex和Vue Router，升级Yarn版本解决'ajv'包问题，并成功集成Vuetify。步骤包括安装基础依赖、手动选择特性、添加Vuetify组件和部署本地服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuetify hello, world

先安装vue-cli
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

通过vue-cli创建项目

vue create helloworld

项目一般都要用vuex和vue-router。preset选择Manually select features
在这里插入图片描述
我要用Vuex，Router

vue版本选2.x

是否启用router历史？我选n。

cd helloworld

vue add vueity

再终端里执行yarn serve命令

yarn serve

打开浏览器，输入http://localhost:8080/
在这里插入图片描述
可以看到vuetify界面了。

https://zhaocunwei.blog.youkuaiyun.com/article/details/111134060

yarn remove sass-loader
yarn add sass-loader@8.0.0

Trouble shooting

执行`vue add vuetify`报错 (2021-10-11)

初始化一个新项目，居然报错。

yarn add v1.22.11
[1/4] 🔍  Resolving packages...
error Couldn't find package "ajv@^6.12.5" required by "schema-utils@^3.0.0" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
 ERROR  command failed: yarn add vue-cli-plugin-vuetify -D --tilde

怀疑是Yarn版本太低导致，查了Yarn的官方文档https://yarnpkg.com/getting-started/install，执行以下命令：