nuxt3+Element Plus项目搭建过程记录

背景

本文只记录项目搭建过程中遇到的一些问题和关键点，nuxt框架的说明和API请参照官网学习
官网：https://nuxt.com/docs/getting-started/introduction

1. 初始化项目

指令如下:

npx nuxi@latest init <project-name>

我在安装过程中出现报错：

[17:47:30]  ERROR  Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: Typ
eError: fetch failed

原因是无法连接网络，解决方案：可以配置代理（可以自己搜教程）或者访问 https://github.com/nuxt/starter/tree/v3 直接下载zip包，解压使用

2. 修改文件目录

为了使目录结构更加清晰，我准备把功能性的文件夹都统一放在新建的src目录下，并把app.vue文件也移到src目录下。为了使nuxt能正确找到文件的位置，需要修改nuxt.config.ts文件，增加srcDir，如下：

const path = require('path')

function resolve(dir) {
   
   
  return path.join(__dirname, dir)
}

export default defineNuxtConfig({
   
   
  devtools: {
   
    enabled: true },
  srcDir: 'src/',
  alias: {
   
   
    '~assets': resolve('/assets'),
    '~public': resolve('/public')
  },
})

注意：配置路径别名的时候一定要使用path，否则在项目中引入assets文件夹下的文件时可能出错
目录结构如下

3. layouts

layouts文件夹下的每个文件都是一个布局组件NuxtLayout，name就是文件名，使用方法如下：

app.vue