今天带大家使用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组件啦!