Vue3、Vuetify和Typscript的环境设置

2 年 ago
清, 宇
1 minute

因为这是为了自己后来回顾所用的东西，所以可能说的话比较随意。想做的事情清单。

流动

・安装 Node.js
・安装 yarn（也许不需要）
・安装 Vue CLI
・使用 Vuetify 创建

Node.js的安装

无论浏览哪个网站，npm都是预设条件…（甚至被人嘲笑因为连这个都不知道）

因为我使用的是Windows系统，所以我从https://nodejs.org/ja/这个网站上安装了推荐版本，并且简单地按了next然后安装了它。

image.png

可能不需要安装 yarn

因为Vue的官方文档使用了yarn，所以我考虑安装yarn，但感觉用npm也可以（我并不太清楚）。

npm install -g yarn

安装Vue CLI

移动文件夹

npm install -g @vue/cli

如果版本是5.0或更高的话，似乎就可以了。

vue -V

用Vuetify创建

我先用vite创建了一个项目，然后按照vuetify的安装方法进行操作，结果安装了beta版，所以我尝试了这种方式。（可能只是方法不对的原因）

创建

yarn create vuetify

输入项目名称

image.png

预设选择

这是什么？
虽然我不太理解，但由于大小相兼，我选择了Essentials。

大致上可以参考这一点，还有可能使用商店-也是出于这个原因。

有四个选项可用：
・只使用Vuetify（默认）
・安装Vuetify和VueRouter（基本版）
・安装Vuetify、VueRouter和可进行状态管理的Pinia（必备版）
・自定义选择（自定义版）

如果组件的层次结构不会太复杂，那么基本版应该就足够了。
如果以后打算从一开始就使用状态管理器，那么应该选择必备版。

Note: This is a paraphrased translation in Mandarin Chinese. The translation may differ in other Chinese dialects.

image.png

你是否使用TypeScript？

image.png

用什么进行安装？就像这样的东西

我不太懂，但我选择了yarn。
毕竟已经安装了它，而且据说yarn更快什么的（反正也是学习嘛）。
（忘记截屏了）

结束了。

听说要做完了，所以我移动到创建的目录中，然后运行。 zuò , wǒ de , .)

cd vuetify-project
yarn dev
image.png
bannerAds