构建nuxt3项目完美开发环境

Nuxt一个基于vue的 是一个开源框架，可使 Web 开发变得直观且功能强大。自信地创建高性能、生产级的全栈 Web 应用和网站，支持客户端和服务端渲染，利于SEO。目前，已经更新迭代到第三代版本。本文教程将以目前nuxt的最新版本 3.12.4为核心展开。

一、安装nuxt3项目

打开一个终端(如果你使用的是Visual Studio Code，你可以打开一个集成终端)，使用下面的命令创建一个新的启动项目:

pnpm dlx nuxi@latest init nuxt-demo

二、配置eslint、prettier，进行代码规范和美化代码

1、安装eslinit和prettier相关依赖

pnpm add eslint-config-prettier eslint-plugin-nuxt eslint-plugin-prettier eslint-plugin-vue prettier prettier-plugin-tailwindcss @nuxtjs/eslint-config-typescript -D

 eslinit直接安装时，默认是9v以上，由于9v版本是一个全新的版本，在配置上与以往大不相同，并且有很多bug尚未修复，以后有时间在做深入研究。因此这里选择使用 eslint的 8.57.0版本，接下来安装eslinit:

pnpm add eslint@8.57.0 -D

2、配置.eslintrc.cjs文件

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parser: 'vue-eslint-parser',
  overrides: [
    {
      files: '*.html',
      processor: 'vue/.vue'
    }
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  extends: [
    // 添加 Vue 支持
    'plugin:vue/vue3-essential',
    // 标准样式
    'standard',
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'plugin:prettier/recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  rules: {
    'prettier/prettier': 'error',
    // Disables eslint throwing an error on script setup vue files
    'import/first': 'off',
    'vue/multi-word-component-names': 'off',
    'no-console': 'off'
  }
};

3、配置.prettierrc文件

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "arrowParens": "always",
  "useTabs": false,
  "tabWidth": 2,
  "quoteProps": "consistent",
  "endOfLine": "auto",
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "vueIndentScriptAndStyle": false,
  "jsxBracketSameLine:": true,
  "htmlWhitespaceSensitivity": "ignore",
  "wrapAttributes": true,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ],
  "plugins": ["prettier-plugin-tailwindcss"]
}

三、配置element-plus

1、安装 @element-plus/nuxt和element-plus

对于 Nuxt 用户，只需要安装 @element-plus/nuxt 即可。

pnpm add  @element-plus/nuxt -D

pnpm add element-plus

 

然后将下面的代码写入你的配置文件.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
})

2、安装图标配置

Element Plus 提供了一套常用的图标集合，安装：

 pnpm add @element-plus/icons-vue 

三、配置多语言国际化

1、安装模块 @nuxtjs/i18n和vue-i18n

pnpm add @nuxtjs/i18n -D

pnpm add vue-i18n

 

2、将@nuxtjs/i18n加入到配置文件：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt', '@nuxtjs/i18n']
})

3、然后再在配置文件当中加入i18n变量：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt', '@nuxtjs/i18n']
   i18n: {
    strategy: 'no_prefix', // 添加路由前缀的方式,无前缀模式'no_prefix'，有前缀模式prefix_and_default
    locales: ['en', 'zh-cn'], // 配置语种
    defaultLocale: 'en', // 默认语种
    vueI18n: '~/locales/i18n.config.ts' // 通过vueI18n配置
  },
})

3、在根目录下创建一个locales文件夹目录结构为：

创建i18n.config.ts文件：

// i18n/config.ts
import en from './lang/en.json';
import zhCn from './lang/zh-cn.json';
export default defineI18nConfig(() => ({
  legacy: false, // 是否兼容之前
  fallbackLocale: 'en', // 区配不到的语言就用en
  locale: 'en',
  messages: {
    en,
    'zh-cn': zhCn
  }
}));

 四、配置tailwind css

1、在nuxt当中安装tailwind css

pnpm add -D tailwindcss postcss autoprefixer

 2、初始化tailwind css

pnpm tailwindcss init

3、在nuxt当中配置

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@element-plus/nuxt', '@nuxtjs/i18n'],
  css: ['~/assets/sass/index.scss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  },
  i18n: {
    strategy: 'no_prefix', // 添加路由前缀的方式,无前缀模式'no_prefix'，有前缀模式prefix_and_default
    locales: ['en', 'zh-cn'], // 配置语种
    defaultLocale: 'en', // 默认语种
    vueI18n: '~/locales/i18n.config.ts' // 通过vueI18n配置
  }
});

至此，一个完整的nuxt3 开发环境就搭建完毕了，最后附上代码nuxt3-templete