现在越来越多的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新手写的不好,欢迎留言指正啦