“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情”

一、 前言

一直想试试vue3，不过我没有系统的学习，就边写项目边记录一下，有错误的地方还请各位指正。

二、过程

1、检查node版本

首先我们检查一下node版本，建议装个nvm管理一下node版本，下面命令可以看到我们目前已有的node版本和当前正在使用的版本

nvm ls

当前版本是14.16.1，满足了vite的最低要求（Vite 需要 Node.js版本 >= 12.0.0）

如果不满足,要可以使用以下命令切换一下

nvm use 指定版本

2、用vite构建项目

可以指定版本直接构建

这是npm6.x版本的命令（npm -v 可查看）

npm init vite@latest 项目名称 --template 模板名称

这是npm7+的命令 会多两个-

npm init vite@latest 项目名称 -- --template 模板名称

如果是yarn

yarn create vite 项目名称 --template 模板名称

本机是6.14.12的版本，而且我们打算构建有ts的版本，所以用的命令是

 npm init vite@latest vue3 --template vue-ts
 

其他的模板还有vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts，可以到vite的官网查看细节

3、安装依赖并运行

正常的

 npm install

正常的

 npm run dev

但是构建的时候，秒构建完毕，vite果然名不虚传啊，被惊艳到了。

项目结构如下

首页如下

到这里我们的项目就正式构建完成啦，后面我们开始摸清一下vue3的写法，还有ts的写法，再考虑引入threejs，顺便学习一波threejs的api。

三、后续

后续先更新一下vite项目下，eslint的配置吧，一片飘红看着就不舒服。

ps： 我是地霊殿三無，很高兴可以一起学习。