Nuxt3创建项目及项目配置

Nuxt3官网https://www.nuxt.com.cn/

项目相关

创建项目

$ npx nuxi init <project-name>
# or
$ pnpm dlx nuxi init <project-name>

创建成功的目录结构

project-name
├─ public
│  └─ favicon.ico
├─ server
│  └─ tsconfig.json
├─ .gitignore
├─ .npmrc
├─ README.md
├─ app.vue
├─ nuxt.config.ts
├─ package.json
└─ tsconfig.json

目录结构很简单，里面很多东西都需要自己去配置，相关配置在下面 ↓

安装依赖项

$ yarn
# or
$ npm install
# or
$ pnpm install

运行项目

$ yarn dev -o
# or
$ npm run dev -- -o
# or
$ pnpm dev -o

配置相关

1. 配置Eslint

执行 npx eslint --init 初始化一个.eslintrc.js并自动安装相关依赖

$ npx eslint --init

---
You can also run this command directly using 'npm init @eslint/config'. 
=> To check syntax and find problems
What type of modules does your project use? 
=> JavaScript modules (import/export)
Which framework does your project use? 
=> Vue.js
Does your project use TypeScript?
=> Yes
Where does your code run?
=> Browser
What format do you want your config file to be in?
=> JavaScript
Would you like to install them now?
=> Yes

虽然nuxt3默认支持了typescript，但是用eslint还是提示Cannot find module ‘typescript’，所以需要再安装typescript依赖pnpm i -D typescript

$ pnpm i -D typescript

针对nuxt3的配置Eslint:

把配置文件中extends项下的"plugin:vue/essential"替换为"plugin:vue/vue3-recommended"(一个是vue2一个是vue3的配置)
安装 eslint-plugin-nuxt 执行 pnpm i -D eslint-plugin-nuxt ，extends 项中增加"plugin:nuxt/recommended"，删除"eslint:recommended"(eslint默认校验)
删除plugins项下的"vue"

最终配置文件

module.exports = {
  'env': {
    'browser': true,
    'es2021': true
  },
  'extends': [
    'plugin:vue/vue3-recommended',
    'plugin:nuxt/recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  'overrides': [
  ],
  'parser': 'vue-eslint-parser',
  'parserOptions': {
    'ecmaVersion': 'latest',
    'sourceType': 'module'
  },
  'plugins': [
    '@typescript-eslint'
  ],
  'rules': {
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-explicit-any': 2,
    '@typescript-eslint/no-inferrable-types': 2,
    'import/prefer-default-export': 'off',
    'import/no-mutable-exports': 'off',
    'no-alert': 2,
    'quotes': [ 2, 'single' ],
    'jsx-quotes': [ 2, 'prefer-double' ],
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-constant-condition': 2,
    'no-delete-var': 2,
    'no-dupe-keys': 2,
    'no-dupe-args': 2,
    'no-duplicate-case': 2,
    'no-else-return': 2,
    'no-eq-null': 2,
    'no-extra-parens': 2,
    'no-ex-assign': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-semi': 2,
    'no-implicit-coercion': 2,
    'no-inline-comments': 2,
    'no-func-assign': 2,
    'no-irregular-whitespace': 2,
    'no-loop-func': 1,
    'no-multiple-empty-lines': [ 2, { 'max': 1 } ],
    'no-nested-ternary': 0,
    'no-new-func': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-plusplus': 2,
    'no-redeclare': 2,
    'no-script-url': 0,
    'no-throw-literal': 2,
    'no-undef': 0,
    'no-undef-init': 2,
    'no-unused-vars': 0,
    'no-useless-call': 2,
    'no-void': 2,
    'no-var': 2,
    'array-bracket-spacing': [ 2, 'always' ],
    'camelcase': 2,
    'consistent-this': [ 2, 'that' ],
    'default-case': 2,
    'eqeqeq': 2,
    'func-names': 0,
    'indent': [ 2, 2 ],
    'init-declarations': 0,
    'key-spacing': [ 0, { 'beforeColon': false, 'afterColon': true } ],
    'object-curly-spacing': [ 2, 'always' ],
    'operator-linebreak': [ 2, 'after' ],
    'id-match': 0,
    'semi': [ 2, 'never' ],
    'use-isnan': 2,
    'valid-typeof': 2,
    'no-class-assign': 2,
    'space-in-parens': 2,
    'keyword-spacing': 2,
    'space-infix-ops': 2,
    'arrow-parens': [ 'error', 'as-needed' ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn'
  }
}

2. 配置pretter

安装prettier 和 @vue/eslint-config-prettier

$ pnpm i -D prettier @typescript-eslint/parser

在根目录创建 .prettierrc 文件, 参考配置：

{
  "printWidth": 140, //代码单行长度
  "tabWidth": 2, //tab键缩进为2空格
  "useTabs": false, //使用空格缩进
  "singleQuote": true, //js单引号
  "semi": false, //去分号
  "trailingComma": "none", //无尾逗号
  "arrowParens": "avoid", //箭头函数尽可能省略括号
  "jsxBracketSameLine": true //标签换行后>单独一行
}

3. 代码commit前验证eslint和commitlint，配置husky 和 commitlint

配置husky

安装：pnpm i husky lint-staged -D
```
$ pnpm i husky lint-staged -D
```
执行：npx husky-init && pnpm i 和 npx husky add .husky/pre-commit 'npx lint-staged'
```
$ npx husky-init && pnpm i
$ npx husky add .husky/pre-commit 'npx lint-staged'
```
检查package是否新增scripts "prepare": "husky install" 和 "lint-staged: {...}", 如果没有需手动加上，同时加入scripts："lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",和 "lint:fix": "eslint --fix --ext .js,.ts,.vue --ignore-path .gitignore .",
```
"lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",
"lint:fix": "eslint --fix --ext .js,.ts,.vue --ignore-path .gitignore ."
```

修改"lint-staged"

"lint-staged": { "*.{js,jsx,vue,ts,tsx}": [ "pnpm run lint:fix" ] }

配置commitlint

安装 commitlint

$ pnpm i -D @commitlint/cli @commitlint/config-conventional

配置package

"commitlint": { "extends": [ "@commitlint/config-conventional" ] }

执行

$ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

配置完成，提交代码测试一下吧

4. 创建常用目录

创建src目录

把 app.vue 文件移入到 src 目录下

修改配置文件 nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  srcDir: 'src/',
})

目录结构为

project-name
├─ public
│  └─ favicon.ico
├─ server
│  └─ tsconfig.json
├─ src
│  └─ app.vue
├─ .gitignore
├─ .eslintrc.js
├─ .npmrc
├─ .prettierrc
├─ README.md
├─ nuxt.config.ts
├─ package.json
└─ tsconfig.json

配置页面路由目录pages，在pages目录里创建页面相关文件
路由相关参考官网介绍

在src目录下创建components目录
Nuxt默认配置自动引入，组件调用方式如下：

# 目录结构一
├─ components
│  └─ ListView.vue
# 对应组件调用方式
// ...
    <ListView />
// ...

# 目录结构二
├─ components
│  └─ Custom
│     └─ Button.vue
# 对应组件调用方式
// ...
    <CustomButton />
// ...

自定义插件
在 src 目录下创建 plugins 目录
在 plugins 目录下创建插件文件，如 directives.ts

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('focus', {
    mounted (el) {
      el.focus()
    },
    getSSRProps (binding, vnode) {
      // you can provide SSR-specific props here
      return {}
    }
  })
})

自定义 hooks
在 src 目录下创建 composables 目录
在 Nuxt 3 中使用 composables 目录时，composables/ 目录将被自动导入，将自定义的组合项（Hooks）自动导入到应用程序中，不需要再在用的地方执 import, 如在 composables 目录下创建 useLogin.ts:
```
export const useLogin => () => {
  return useState('user', () => 'user')
}

# 使用方式： 在需要调用的文件执行
<script lang="ts" setup>
const login = userLogin()
</script>
```

配置模板 Layouts
在 src 目录下创建 default.vue 文件，作为默认模板

<script setup lang="ts"></script>

<template>
  <div>
    This Is A Default Layout Page!
    <slot />
  </div>
</template>

<style scoped></style>

使用方式

<template>
  <NuxtLayout>
    <!--插槽内显示的内容-->
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts"></script>

自定义模板：在 Layouts 目录下创建 layout.vue 文件

<script setup lang="ts"></script>

<template>
  <div>
    This is a custom layout named Layout!
    <slot />
  </div>
</template>

<style scoped></style>

使用方式

<template>
  <!--name为自定义的layout的文件名-->
  <NuxtLayout name="layout">
    <!--插槽内显示的内容-->
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts"></script>

目录结构

project-name
├─ .eslintrc.js
├─ .gitignore
├─ .npmrc
├─ .prettierrc
├─ README.md
├─ nuxt.config.ts
├─ package.json
├─ pnpm-lock.yaml
├─ public
│  └─ favicon.ico
├─ server
│  └─ tsconfig.json
├─ src
│  ├─ app.vue
│  ├─ components
│  │  └─ Custom
│  │     └─ Button.vue
│  ├─ layouts
│  │  ├─ default.vue
│  │  └─ layout.vue
│  ├─ pages
│  │  └─ index.vue
│  ├─ plugins
├─ tailwind.config.js
└─ tsconfig.json

5. 配置 pinia

安装 pinia, 官网https://pinia.web3doc.top/
```
$ pnpm install pinia @pinia/nuxt
```

修改 nuxt.config.js 文件

@@filename(nuxt.config.ts)
export default defineNuxtConfig({
 // ... 其他配置
modules: [
    // ...
    '@pinia/nuxt',
  ],
})

在 src 目录下创建 stores 目录

新建 useUserStore.ts 文件

import { defineStore } from 'pinia'

export const useUserStore = defineStore('use', () => {
  const userName = ref<string>('USER_NAME')

  return {
    userName
  }
})

使用 useUserStore

<script setup lang="ts">
import { useUserStore } from '@/stores'
const userName = useUserStore().userName
</script>

配置数据持久化，安装 @pinia-plugin-persistedstate/nuxt 官网介绍

$ pnpm i -D @pinia-plugin-persistedstate/nuxt
# or
$ npm i -D @pinia-plugin-persistedstate/nuxt
# or
$ yarn add -D @pinia-plugin-persistedstate/nuxt

配置 nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],
})

使用

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: true,
})

设置缓存方式为 localStorage

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: {
    storage: persistedState.localStorage,
  },
})

设置缓存方式为 sessionStorage

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: {
    storage: persistedState.sessionStorage,
  },
})

设置缓存方式为 cookiesWithOptions

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: {
    storage: persistedState.cookiesWithOptions({
      sameSite: 'strict',
    }),
  },
})

全局配置选项

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt'
  ],
  piniaPersistedstate: {
    cookieOptions: {
      sameSite: 'strict',
    },
    storage: 'localStorage'
  },
})

storage：设置默认用于持久保存的存储（localStorage、sessionStorage或cookies）
cookieOptions：默认cookie 选项（仅在保留 cookie 时使用）
debug: 看到了debug

6. 配置 vueuse

安装 vueuse，官网https://www.vueusejs.com/
```
$ pnpm install @vueuse/nuxt @vueuse/core
```

配置 nuxt.config.js

@@filename(nuxt.config.js)
export default defineNuxtConfig({
  // ... 其他配置
  modules: [
    // ...
    '@vueuse/nuxt',
  ],
})

使用方式

<script setup lang="ts">
const { x, y } = useMouse()
</script>
 
<template>
  <div>pos: {{x}}, {{y}}</div>
</template>

7. 配置SCSS

$ pnpm add sass sass-loader -D

注： 安装完成后直接在页面中使用即可

配置全局样式文件，创建文件 /assets/styles/default.scss

$backgrondColor: rgb(125, 159, 172);
$theme: #ff0000;

在 nuxt.config.ts 中添加 scss 的配置

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "~/assets/styles/default.scss";' 
        }
      }
    }
  }
})

8. 配置tailwindcss，官网https://tailwindcss.com/

安装

# 安装
$ npm install -D tailwindcss postcss autoprefixer
# 初始化
$ npx tailwindcss init

配置 nuxt.config.ts 文件

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

配置 tailwind.config.js 文件

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/components/**/*.{vue,js}",
    "./src/layouts/**/*.vue",
    "./src/pages/**/*.vue",
    "./src/plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./src/app.vue"
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {}
  },
  plugins: [],
}

创建 tailwind.css 文件

 @@filename(/assets/styles/tailwind.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

全局配置 tailwindcss

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['~/assets/styles/tailwind.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

最后编辑于：2023.07.10 17:08:42

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,080评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,422评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,630评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,554评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,662评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,856评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,014评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,752评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,212评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,541评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,687评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,347评论 4赞 331
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,973评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,777评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,006评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,406评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,576评论 2赞 349

Nuxt3创建项目及项目配置

项目相关

创建项目

安装依赖项

运行项目

配置相关

1. 配置Eslint

2. 配置pretter

3. 代码commit前验证eslint和commitlint， 配置husky 和 commitlint

4. 创建常用目录

创建src目录

5. 配置 pinia

6. 配置 vueuse

7. 配置SCSS

8. 配置tailwindcss， 官网https://tailwindcss.com/

推荐阅读更多精彩内容

3. 代码commit前验证eslint和commitlint，配置husky 和 commitlint

8. 配置tailwindcss，官网https://tailwindcss.com/