今天带大家使用nuxt3+vant3搭建一个项目。
nuxt3
Nuxt 3 是一个开源框架，可以自动整合了很多东西，另外,nuxt3还是Vue3的同构ssr渲染的使用方案。csr,ssr,srg三种渲染方案三种渲染模式可以参考我的都2023年了，还在用传统的前后端分离？来学习一下CSR,SSR与SRG吧!!! - 掘金 (juejin.cn)这篇文章。
nuxt3初始化
在初始化nuxt项目之前，我曾想，不就是创建个项目吗？简单，直接终端开搞。然后就报错了，第一时间我以为我可能没开代理，果断科学上网，但是还是无法成功初始化nuxt项目。
纳尼？
上网百度了一番之后，终于在咱们掘金上找到了一个特别靠谱的解决方案。
文章如下：大佬解决
试了一下，确实成功初始化了nuxt项目。
简单的说，我们只需要打开我们的host文件，文件地址如下:C盘 -> Windows -> System32 -> drives -> etc -> hosts文件。
然后在最后一行加入185.199.108.133 raw.githubusercontent.com
在配置好hosts之后，我们开始初始化我们的nuxt项目。
我们可以采取官网的方式
npx nuxi init nuxt-app
初始化模板项目。
也可以使用脚手架create-nuxt-app来创建
npx create-nuxt-app <项目名>
等待完成后，我们运行cd到项目目录，运行yarn dev启动项目。
成功!!!!
vant3
vant3是一个支持Vue3特别好的一款适配手机端的组件库，在手机端的表现尤为优秀。接下来我们来整合一下Vant3到我们的项目中去。
安装
# Vue 3 项目，安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant
而对于Nuxt3项目，我们要在插件下做一些配置。
我们创建一个plugins目录，在该目录下创建一个vant.js配置文件，文件内容如下:
import { defineNuxtPlugin } from '#app';
import { Row, Col, Icon, Image, Cell, CellGroup, Button, NavBar, Sidebar, SidebarItem, Tabbar, TabbarItem, Toast } from 'vant';
// 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
import 'vant/lib/index.css';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp
.use(Row)
.use(Col)
.use(Image)
.use(Icon)
.use(Cell)
.use(CellGroup)
.use(Button)
.use(Sidebar)
.use(SidebarItem)
.use(Image)
.use(NavBar);
});
这里推荐按需引入，减少体积。
接下来我们就可以使用vant3的UI组件啦!
