初始化一个 Nuxt.js 项目 | 青训营笔记

戴兜
397 阅读3分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

青训营大项目的前端准备使用Nuxt3，这篇文章主要记录项目的初始化过程。

项目使用pnpm作为包管理器

创建Nuxt3空白项目

运行Nuxt的初始化工具即可快速创建项目

pnpm dlx nuxi init juejin-fe

注：

此处的 juejin-fe 是自己的项目文件夹名称

pnpm dlx 命令类似于 npm 中的 npx 命令。在pnpm中曾经也使用类似形式的命令 pnpm，但是现在过时了。

等待片刻，空白项目就创建完成了

配置VSCode推荐扩展

因为涉及到团队协作，不同团队成员之间编辑器的一致性就很重要，为了方便团队成员安装相关插件，需要维护一份VSCode扩展列表

创建 .vscode 文件夹，在该文件夹下创建文件 extensions.json，内容如下

{
    "recommendations": [
        "vue.volar",
        "vue.vscode-typescript-vue-plugin",
        "esbenp.prettier-vscode",
        "voorjaar.windicss-intellisense",
        "dbaeumer.vscode-eslint"
    ]
}

这是一个VSCode自带的功能，当检测到 extensions.json 时，会读取里面的 recommendations 字段，并将相应的扩展推荐给开发者。

vue.volar - vue3开发所需要的扩展 vue.vscode-typescript-vue-plugin - vue3 TypeScript 开发所需要的扩展 esbenp.prettier-vscode - 根据 prettier 配置格式化文件 voorjaar.windicss-intellisense - windicss 语法提示 dbaeumer.vscode-eslint - eslint 语法检查

配置VSCode工作区设置

原因同上，节省大家开发的时间

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "css.lint.unknownAtRules": "ignore",
    "less.lint.unknownAtRules": "ignore",
    "scss.lint.unknownAtRules": "ignore",
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

editor.formatOnSave - 文件保存时进行格式化

source.fixAll.eslint - 当文件保存时，根据 eslint 规则修正文件格式

[css|scss|less].lint.unknownAtRules - 忽略未知的At Rules。因为开发使用了 windicss，倘若不进行此设置，其许多语法例如@apply @layer在VSCode中都会产生警告，影响开发。

editor.defaultFormatter - 设置每种文件的格式化扩展，这里全部设置成 Prettier

Prettier 配置

安装依赖

pnpm i -D prettier

新建文件 .prettierrc.json

{
    "tabWidth": 2,
    "useTabs": false,
    "singleQuote": true,
    "semi": false,
    "arrowParens": "avoid",
    "jsxBracketSameLine": true,
    "endOfLine": "auto"
}

tabWidth - 缩进的宽度，这里设置成两个空格

useTabs - 使用制表符缩进，这里设置为 false（即使用空格）

singleQuote - 在能使用单引号的情况下尽量使用单引号

semi - 每行的末尾是否需要分号，这里设置为 false

arrowParens - 箭头函数是否需要括号，这里设置成 avoid，即在只有一个参数时，将省略括号

jsxBracketSameLine - 标签尾部 > 是否换行，这里设置不换行

endOfLine - 行尾时 crlf 还是 lf，这里设置从自动

ESLint 配置

安装依赖

pnpm i -D eslint eslint-config-prettier eslint-plugin-prettier @nuxt/eslint-config

新建文件 .eslintrc

{
    "extends": [
        "@nuxt",
        "plugin:prettier/recommended"
    ],
    "rules": {
        "vue/multi-word-component-names": 0,
        "vue/max-attributes-per-line": 0,
        "vue/first-attribute-linebreak": 0,
        "prettier/prettier": [
            "warn"
        ]
    }
}

首先Nuxt官方提供了许多语法规则包，这里通过 @nuxt 引入，接着引入 plugin:prettier/recommended 插件，让 eslint 支持 prettier 的检查

vue/multi-word-component-names - Vue组件需要多个单词，这里忽略（即允许单个单词） vue/max-attributes-per-line - 忽略 vue 对每行属性的限制（和 prettier 冲突） vue/first-attribute-linebreak - 忽略第一个属性换行（和 prettier 冲突） prettier/prettier - prettier 语法检查的等级设置为警告（默认是 error）

Windicss 配置

安装依赖

pnpm i -D windicss nuxt-windicss

在 nuxt.config.ts 中添加 module

modules: ['nuxt-windicss'],

新增 windi.config.ts

import { defineConfig } from 'windicss/helpers'

interface IOpacityItem {
  opacityVariable: string
  opacityValue?: number
}

function withOpacityValue(variable: string) {
  return ({ opacityValue }: IOpacityItem) => {
    if (opacityValue === undefined) {
      return `rgb(var(${variable}))`
    }
    return `rgb(var(${variable}) / ${opacityValue})`
  }
}

export default defineConfig({
  theme: {
    extend: {
      colors: {
        primary: {
          extralight: withOpacityValue('--color-primary-extralight'),
          light: withOpacityValue('--color-primary-light'),
          medium: withOpacityValue('--color-primary-medium'),
          DEFAULT: withOpacityValue('--color-primary'),
          dark: withOpacityValue('--color-primary-dark'),
        },
        gray: {
          light: withOpacityValue('--color-gray-light'),
          DEFAULT: withOpacityValue('--color-gray'),
          dark: withOpacityValue('--color-gray-dark'),
        },
        blue: withOpacityValue('--color-blue'),
        green: withOpacityValue('--color-green'),
        black: withOpacityValue('--color-black'),
        white: withOpacityValue('--color-white'),
      },
    },
  },
})

新增了一个主题色 primary，以及相关的变种颜色 extralight light medium dark，使用一个工具函数 withOpacityValue 来处理css变量，在windicss语法包含透明度的时候，对变量包裹形式进行转换

在旧版本中，因为windicss 的 bug，withOpacityValue 函数无法正常处理阴影透明度，新版本已经修复了

avatar
文章
阅读
粉丝