vue3+vite搭建项目（一）

现在越来越多的ui库支持了vue3，因为企业项目还都是vue2，也看过vue3的文档但还没系统的开始做项目，还是有必要从头开始搭建一下的。

1，首先我们都知道，需要安装环境，打开命令行（win+r）
然后node-v看一下有没有出现版本号，因为我已经安装好了就不演示了，没有安装的可以百度一下全局安装一下
2，然后看一下npm有没有安装好，脚手架有没有安装好（记得这里V大写）


到这里，之前vue2大家应该都没问题了，这里记得vue的版本，如果版本还是vue2的去安装一下vue3（cnpm install vue@next），因为我这里已经全局安装了cnpm，如果没有可以安装一下或者直接npm下载

3，下面然后就是看一下vite有没有安装好，如果还没安装，就安装一下（npm install vite –g）

4，接下来就是用vite+vue3构建一个新项目了，这里可以看一下vite的中文文档
https://vitejs.cn/guide/#scaffolding-your-first-vite-project

进入我们项目的目录，cd一下，我个人喜欢在d盘，你们随意
上面也写了如何构建一个新项目，我们直接在命令行敲，然后输入项目的名称，我们直接用默认的名称了，然后回车，下面是选择框架，我们选用vue，回车，然后可以选择是否用ts，我们这里就不选了直接用js写了


到这里还是比较顺利的，我们接下来按照他的提示先把项目跑起来

这边有人会奇怪，vite不是冷加载很快吗为什么安装依赖还是和以前一样啊，不是一回事哈，不要混淆。我们可以看到启动项目非常的快，这里vite就是按需加载和webpack有不一样，我这里用了268ms就启动了。这里我们发现不再是我们熟悉的8080端口了而是3000端口


已经能打开了，功能也正常
接下来发现network不是ip+端口号，而是出现了Network: use --host to expose，说明无法通过ip+端口号访问到我们页面
不要慌，下面来讲。我们先打开vscode，你们随意
可以看到目录结构和之前还是有区别的，首先我们的入口页index.html不在当在public中了，其次就是不再是vue.config.js换成了vite.config.js，都是一些配置项，上面提到我们不能通过ip打开，我们就可以在这里配置



我们看到已经可以访问了

这章我们成功搭建了项目啦，还没写东西应该没有什么难度，有问题的大家可以提，下一章继续~
因为还是vue3新手写的不好，欢迎留言指正啦