vite+ts+elementPlus+tailwindcss+nuxt3项目的搭建与配置

Y-Maple

已于 2025-04-29 12:21:21 修改

阅读量702

点赞数 4

CC 4.0 BY-SA版权

文章标签：前端 vue.js typescript nuxt element-plus

于 2025-04-16 12:18:31 首次发布

本文链接：https://blog.csdn.net/m0_56245485/article/details/147271060

一、起步

1. 创建nuxt3项目：npm create nuxt <项目名称>

二、安装用到的依赖

1. element-plus：

npm install -D @element-plus/nuxt
npm install element-plus
npm install @element-plus/icons-vue
npm install -D unplugin-vue-components unplugin-auto-import

2. pinia：

npm install @pinia/nuxt
npm install pinia
npm install pinia-plugin-persistedstate

3. tailwindcss：

npm install -D @nuxtjs/tailwindcss

4. animate.css

npm install animate.css

三、在nuxt.config.ts处配置

其中配置element-plus的icon只需要在配置里写上

elementPlus: {
icon: 'ElIcon',
importStyle: 'scss'
}

然后页面使用时，仅需要在普通项目使用方法的<el-icon> <Right /></el-icon>的基础上加上ElIcon，即：

<el-icon><ElIconRight /></el-icon>，

不需要像网上大多数文章那样重新注册（可能有像我这样配置的文章，不过我没有找到，我因为不相信element的导入会这么麻烦，然后根据element-plus官网找到了示例项目https://github.com/element-plus/element-plus-nuxt-starter，参照了里面的配置方法）

具体代码：

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineNuxtConfig({
  ssr: true,
  devServer: {
    host: 'localhost, 0.0.0.0', // 这样配置，控制台就能像vite那样同时输出localhost地址和本机ip地址
    port: 3000,
  },
  // 配置elementPlus的icon
  elementPlus: {
    icon: 'ElIcon',
    importStyle: 'scss',
    themes: ['dark'],
  },
  vite: {
    plugins: [
      // 配置elementPlus按需自动导入
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    server: {
      open: true,
      proxy: {
        '/api': {
          target: `https://xx.xx`,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  },
  app: {
    // 配置html的head标签的内容
    head: {
      htmlAttrs: {
        lang: 'en',
      },
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width,initial-scale=1.0' },
        { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    },
  },
  // 全局引入css
  css: [
    'animate.css/animate.min.css', // 使用方法：animate__animated [具体动画类]
    '~/assets/css/main.scss',
  ],
  // 配置modules
  modules: [
    '@nuxt/content',
    '@nuxt/eslint',
    '@nuxt/image',
    '@nuxt/scripts',
    '@nuxt/test-utils',
    '@element-plus/nuxt',
    '@pinia/nuxt',
    'pinia-plugin-persistedstate/nuxt',
    '@nuxtjs/tailwindcss',
  ],
})