1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[2392],{15482:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>d,contentTitle:()=>o,default:()=>x,frontMatter:()=>r,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"notes/Web_Dev/Vue/Nuxt/init","title":"[Nuxt] \u5c08\u6848\u521d\u59cb\u5316","description":"\u56e0\u70ba\u6211\u5728\u5beb\u9019\u7bc7\u6587\u7ae0\u6642\u6b63\u5728\u73a9 pnpm\uff0c\u6240\u4ee5\u4e0b\u65b9\u5957\u4ef6\u5b89\u88dd\u662f\u7d00\u9304 pnpm \u7684\u6307\u4ee4\uff0c\u82e5\u662f\u7528 npm \u6216 yarn \u7684\u8a71\u8acb\u81ea\u884c\u8f49\u63db\u3002","source":"@site/docs/notes/Web_Dev/Vue/Nuxt/01-init.mdx","sourceDirName":"notes/Web_Dev/Vue/Nuxt","slug":"/notes/Web_Dev/Vue/Nuxt/init","permalink":"/docs/notes/Web_Dev/Vue/Nuxt/init","draft":false,"unlisted":false,"tags":[{"inline":true,"label":"vue3","permalink":"/docs/tags/vue-3"},{"inline":true,"label":"nuxt","permalink":"/docs/tags/nuxt"}],"version":"current","lastUpdatedAt":1766374113000,"sidebarPosition":1,"frontMatter":{"title":"[Nuxt] \u5c08\u6848\u521d\u59cb\u5316","sidebar_label":"[Nuxt] \u5c08\u6848\u521d\u59cb\u5316","tags":["vue3","nuxt"],"keywords":["vue3","nuxt"]},"sidebar":"notes","previous":{"title":"Nuxt","permalink":"/docs/category/nuxt"},"next":{"title":"[Nuxt] \u5c08\u6848\u7d50\u69cb","permalink":"/docs/notes/Web_Dev/Vue/Nuxt/structure"}}');var i=t(74848),l=t(28453);const r={title:"[Nuxt] \u5c08\u6848\u521d\u59cb\u5316",sidebar_label:"[Nuxt] \u5c08\u6848\u521d\u59cb\u5316",tags:["vue3","nuxt"],keywords:["vue3","nuxt"]},o=void 0,d={},c=[{value:"\u5efa\u7acb\u5c08\u6848",id:"\u5efa\u7acb\u5c08\u6848",level:2},{value:"Pinia - \u5168\u57df\u8cc7\u6599\u7ba1\u7406\u5de5\u5177",id:"pinia---\u5168\u57df\u8cc7\u6599\u7ba1\u7406\u5de5\u5177",level:2},{value:"Tailwind CSS (optional) - CSS \u7de8\u8f2f",id:"tailwind-css-optional---css-\u7de8\u8f2f",level:2},{value:"Eslint - \u7a0b\u5f0f\u78bc\u8a9e\u6cd5\u6aa2\u67e5",id:"eslint---\u7a0b\u5f0f\u78bc\u8a9e\u6cd5\u6aa2\u67e5",level:2},{value:"Prettier - \u7dad\u6301\u7a0b\u5f0f\u78bc\u683c\u5f0f (\u5c24\u5176\u662f Tailwind CSS \u7684\u6392\u5e8f)",id:"prettier---\u7dad\u6301\u7a0b\u5f0f\u78bc\u683c\u5f0f-\u5c24\u5176\u662f-tailwind-css-\u7684\u6392\u5e8f",level:2},{value:"Stylelint - \u7dad\u6301 CSS\u3001SCSS \u7b49\u6a23\u5f0f\u7a0b\u5f0f\u78bc\u6574\u9f4a",id:"stylelint---\u7dad\u6301-cssscss-\u7b49\u6a23\u5f0f\u7a0b\u5f0f\u78bc\u6574\u9f4a",level:2},{value:"Vuetify (optional) - UI \u6846\u67b6",id:"vuetify-optional---ui-\u6846\u67b6",level:2},{value:"Reference",id:"reference",level:2}];function a(n){const e={a:"a",admonition:"admonition",br:"br",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...n.components},{Details:t}=e;return t||function(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.admonition,{type:"info",children:(0,i.jsxs)(e.p,{children:["\u56e0\u70ba\u6211\u5728\u5beb\u9019\u7bc7\u6587\u7ae0\u6642\u6b63\u5728\u73a9 pnpm\uff0c\u6240\u4ee5\u4e0b\u65b9\u5957\u4ef6\u5b89\u88dd\u662f\u7d00\u9304 pnpm \u7684\u6307\u4ee4\uff0c\u82e5\u662f\u7528 npm \u6216 yarn \u7684\u8a71\u8acb\u81ea\u884c\u8f49\u63db\u3002",(0,i.jsx)(e.br,{}),"\n","\u57fa\u672c\u4e0a ",(0,i.jsx)(e.code,{children:"npx"})," \u7d04\u7b49\u65bc ",(0,i.jsx)(e.code,{children:"pnpm dlx"}),"\u3002"]})}),"\n",(0,i.jsx)(e.h2,{id:"\u5efa\u7acb\u5c08\u6848",children:"\u5efa\u7acb\u5c08\u6848"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"\u5efa\u7acb Nuxt3 \u5c08\u6848"}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"npx nuxi@latest init <project-name>\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"2",children:["\n",(0,i.jsx)(e.li,{children:"\u5b89\u88dd\u5c08\u6848\u521d\u59cb\u5957\u4ef6"}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"pnpm install\n"})}),"\n",(0,i.jsxs)(e.admonition,{type:"tip",children:[(0,i.jsx)(e.p,{children:"\u73fe\u5728\u5f88\u591a\u4eba\u90fd\u5f88\u611b\u7528 SCSS \u4f86\u5beb CSS\uff0c\u6240\u4ee5\u9700\u8981\u7684\u8a71\u8acb\u984d\u5916\u5b89\u88dd\uff1a"}),(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"p\u200bnpm install sass\n"})})]}),"\n",(0,i.jsx)(e.h2,{id:"pinia---\u5168\u57df\u8cc7\u6599\u7ba1\u7406\u5de5\u5177",children:"Pinia - \u5168\u57df\u8cc7\u6599\u7ba1\u7406\u5de5\u5177"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"\u5b89\u88dd Pinia"}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"pnpm install pinia @pinia/nuxt\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"2",children:["\n",(0,i.jsx)(e.li,{children:"\u4fee\u6539 Nuxt3 \u914d\u7f6e\uff1a"}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",metastring:"title='nuxt.config.ts'",children:'export default defineNuxtConfig({\n devtools: { enabled: true },\n modules: [\n [\n "@pinia/nuxt",\n {\n autoImports: ["defineStore", ["defineStore", "definePiniaStore"]],\n },\n ],\n ],\n});\n'})}),"\n",(0,i.jsx)(e.h2,{id:"tailwind-css-optional---css-\u7de8\u8f2f",children:"Tailwind CSS (optional) - CSS \u7de8\u8f2f"}),"\n",(0,i.jsxs)(e.p,{children:["\u9019\u88e1\u5fc5\u9808\u5b89\u88dd Nuxt3 \u7684\u7248\u672c ",(0,i.jsx)(e.a,{href:"https://tailwindcss.com/docs/guides/nuxtjs#modules",children:(0,i.jsx)(e.strong,{children:"@nuxtjs/tailwindcss"})}),"\uff1a"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"pnpm dlx nuxi module add @nuxtjs/tailwindcss\npnpm dlx tailwindcss init\n"})}),"\n",(0,i.jsx)(e.admonition,{type:"tip",children:(0,i.jsxs)(e.p,{children:["\u5b89\u88dd ",(0,i.jsx)(e.a,{href:"https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss",children:"Tailwind CSS IntelliSense"})," \u8f14\u52a9\u958b\u767c\u3002"]})}),"\n",(0,i.jsx)(e.h2,{id:"eslint---\u7a0b\u5f0f\u78bc\u8a9e\u6cd5\u6aa2\u67e5",children:"Eslint - \u7a0b\u5f0f\u78bc\u8a9e\u6cd5\u6aa2\u67e5"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsxs)(e.li,{children:["\u5b89\u88dd Eslint\uff0c\u5728 Nuxt3 \u5c1a\u9808\u984d\u5916\u5b89\u88dd ",(0,i.jsx)(e.a,{href:"https://nuxt.com/docs/guide/concepts/code-style#eslint",children:(0,i.jsx)(e.strong,{children:"@nuxt/eslint-config"})}),"\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"pnpm add -D eslint @nuxt/eslint-config\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"2",children:["\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"root"})," \u4e0b\u5efa\u7acb\u4e00\u500b ",(0,i.jsx)(e.code,{children:".eslintrc.cjs"}),"\uff0c\u4e26\u8f38\u5165\u5167\u5bb9\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",metastring:"title='.eslintrc.cjs'",children:'module.exports = {\n root: true,\n extends: ["@nuxt/eslint-config"],\n ignorePatterns: ["dist/"]\n};\n'})}),"\n",(0,i.jsxs)(e.ol,{start:"3",children:["\n",(0,i.jsxs)(e.li,{children:["\u4fee\u6539 ",(0,i.jsx)(e.code,{children:"package.json"}),"\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-json",children:'"scripts": {\n "lint": "eslint .",\n "lint:fix": "eslint . --fix",\n}\n'})}),"\n",(0,i.jsxs)(e.ol,{start:"4",children:["\n",(0,i.jsxs)(e.li,{children:["\u66f4\u6539 VScode \u914d\u7f6e - \u4f7f\u7528 ",(0,i.jsx)(e.code,{children:"ctrl+shift+p"})," \u641c\u5c0b ",(0,i.jsx)(e.strong,{children:"Open Workspace Settings (JSON)"}),"\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-json",children:'{\n "editor.codeActionsOnSave": {\n "source.fixAll.eslint": "explicit"\n }\n}\n'})}),"\n",(0,i.jsx)(e.admonition,{type:"tip",children:(0,i.jsxs)(e.p,{children:["\u5b89\u88dd ",(0,i.jsx)(e.a,{href:"https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint",children:"ESLint"})," \u8f14\u52a9\u958b\u767c\u3002"]})}),"\n",(0,i.jsx)(e.h2,{id:"prettier---\u7dad\u6301\u7a0b\u5f0f\u78bc\u683c\u5f0f-\u5c24\u5176\u662f-tailwind-css-\u7684\u6392\u5e8f",children:"Prettier - \u7dad\u6301\u7a0b\u5f0f\u78bc\u683c\u5f0f (\u5c24\u5176\u662f Tailwind CSS \u7684\u6392\u5e8f)"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsxs)(e.li,{children:["\u5b89\u88dd Prettier \u8ddf\u63d2\u4ef6\uff1a","\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"prettier"}),": \u4e3b\u8981\u7684\u4ee3\u78bc\u683c\u5f0f\u5316\u5de5\u5177\u3002"]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"prettier-plugin-tailwindcss"}),": \u6574\u5408Tailwind CSS\u3002"]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"eslint-config-prettier"}),": \u95dc\u9589\u6240\u6709\u4e0d\u5fc5\u8981\u6216\u53ef\u80fd\u8207 Prettier \u885d\u7a81\u7684ESLint\u898f\u5247\u3002"]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"eslint-plugin-
1prettier"}),": \u5c07Prettier\u4f5c\u70baESLint\u898f\u5247\u904b\u884c\u3002"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"pnpm install -D prettier prettier-plugin-tailwindcss eslint-config-prettier eslint-plugin-prettier\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"2",children:["\n",(0,i.jsxs)(e.li,{children:["\u5efa\u7acb ",(0,i.jsx)(e.code,{children:".prettierrc.cjs"})," \u6a94\u6848\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:'module.exports = {\n plugins: [\n \'prettier-plugin-tailwindcss\'\n ],\n printWidth: 80,\n semi: false,\n singleQuote: true,\n trailingComma: \'none\',\n bracketSpacing: true,\n arrowParens: "always",\n bracketSameLine: false,\n endOfLine: "auto",\n htmlFormat: "auto",\n javascriptFormat: "auto",\n}\n'})}),"\n",(0,i.jsxs)(e.ol,{start:"3",children:["\n",(0,i.jsxs)(e.li,{children:["\u524d\u5f80 ",(0,i.jsx)(e.code,{children:".eslintrc.cjs"})," \u505a prettier \u5f15\u5165\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"module.exports = {\n root: true,\n extends: ['@nuxt/eslint-config', 'prettier'],\n plugins: ['prettier'],\n rules: {\n 'prettier/prettier': 'error'\n },\n ignorePatterns: [\"dist/\"]\n}\n"})}),"\n",(0,i.jsx)(e.admonition,{type:"tip",children:(0,i.jsxs)(e.p,{children:["\u5b89\u88dd ",(0,i.jsx)(e.a,{href:"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode",children:"Prettier - Code formatter"})," \u8f14\u52a9\u958b\u767c\u3002"]})}),"\n",(0,i.jsx)(e.h2,{id:"stylelint---\u7dad\u6301-cssscss-\u7b49\u6a23\u5f0f\u7a0b\u5f0f\u78bc\u6574\u9f4a",children:"Stylelint - \u7dad\u6301 CSS\u3001SCSS \u7b49\u6a23\u5f0f\u7a0b\u5f0f\u78bc\u6574\u9f4a"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"\u5b89\u88dd Stylelint\uff1a"}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"pnpm install --save-dev stylelint stylelint-config-standard\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"2",children:["\n",(0,i.jsx)(e.li,{children:"\u5b89\u88dd SCSS \u8ddf Vue \u7684\u898f\u7bc4\uff1a"}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"pnpm install --save-dev stylelint-config-standard-scss stylelint-config-standard-vue stylelint-order postcss postcss-scss postcss-html\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"3",children:["\n",(0,i.jsxs)(e.li,{children:["\u5b89\u88dd ",(0,i.jsx)(e.code,{children:"@nuxtjs/stylelint-module"}),"\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"pnpm add -D @nuxtjs/stylelint-module\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"4",children:["\n",(0,i.jsxs)(e.li,{children:["\u8abf\u6574 ",(0,i.jsx)(e.code,{children:"nuxt.config.ts"})," \u914d\u7f6e\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",metastring:"title='nuxt.config.ts'",children:"export default {\n modules: [\n '@nuxtjs/stylelint-module',\n ]\n}\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"5",children:["\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"root"})," \u4e0b\u5efa\u7acb ",(0,i.jsx)(e.code,{children:".stylelintrc.cjs"})," \u4e26\u8f38\u5165\uff1a"]}),"\n"]}),"\n",(0,i.jsxs)(t,{children:[(0,i.jsx)("summary",{children:"stylelintrc \u53c3\u8003\u914d\u7f6e"}),(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"module.exports = {\n extends: [\n \"stylelint-config-standard\",\n 'stylelint-config-standard-scss',\n \"stylelint-config-standard-vue/scss\"\n ],\n plugins: [\n 'stylelint-order'\n ],\n ignoreFiles: [\"dist/**/*\"],\n \"fix\": true, // \u81ea\u52d5\u4fee\u5fa9\n overrides: [\n {\n files: [ '*.scss', '**/*.scss', \"*.vue\", \"**/*.vue\" ],\n rules: {\n 'scss/no-global-function-names': null // \u95dc\u9589 scss \u5168\u57df\u51fd\u5f0f\u540d\u7a31\u6aa2\u67e5\n }\n }\n ],\n rules: {\n 'unit-allowed-list': [ 'em', 'rem', 'deg', 'px', 'vh', 'vw', '%', 's', 'ms', 'fr' ],\n 'order/properties-order': [\n 'position',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'display',\n 'align-items',\n 'justify-content',\n 'float',\n 'clear',\n 'overflow',\n 'overflow-x',\n 'overflow-y',\n 'margin',\n 'margin-top',\n 'margin-right',\n 'margin-bottom',\n 'margin-left',\n 'padding',\n 'padding-top',\n 'padding-right',\n 'padding-bottom',\n 'padding-left',\n 'width',\n 'min-width',\n 'max-width',\n 'height',\n 'min-height',\n 'max-height',\n 'font-size',\n 'font-family',\n 'font-weight',\n 'text-align',\n 'text-justify',\n 'text-indent',\n 'text-overflow',\n 'text-decoration',\n 'white-space',\n 'color',\n 'background',\n 'background-position',\n 'background-repeat',\n 'background-size',\n 'background-color',\n 'background-clip',\n 'border',\n 'border-style',\n 'border-width',\n 'border-color',\n 'border-top-style',\n 'border-top-width',\n 'border-top-color',\n 'border-right-style',\n 'border-right-width',\n 'border-right-color',\n 'border-bottom-style',\n 'border-bottom-width',\n 'border-bottom-color',\n 'border-left-style',\n 'border-left-width',\n 'border-left-color',\n 'border-radius',\n 'opacity',\n 'filter',\n 'list-style',\n 'outline',\n 'visibility',\n 'z-index',\n 'box-shadow',\n 'text-shadow',\n 'resize',\n 'transition'\n ]\n }\n}\n"})})]}),"\n",(0,i.jsxs)(e.ol,{start:"6",children:["\n",(0,i.jsxs)(e.li,{children:["\u4fee\u6539 ",(0,i.jsx)(e.code,{children:"vscode/settings.json"}),"\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-json",children:'{\n "editor.codeActionsOnSave": {\n "source.fixAll.eslint": "explicit",\n "source.fixAll.stylelint": "explicit"\n },\n "stylelint.validate": [ "css", "scss", "vue" ]\n}\n'})}),"\n",(0,i.jsx)(e.admonition,{type:"info",children:(0,i.jsxs)(e.p,{children:["\u9019\u500b ",(0,i.jsx)(e.code,{children:"vscode/settings.json"})," \u5c31\u662f\u5728\u8a2d\u5b9a eslint \u6642\u7522\u751f\u7684\u3002"]})}),"\n",(0,i.jsx)(e.admonition,{type:"tip",children:(0,i.jsxs)(e.p,{children:["\u5b89\u88dd ",(0,i.jsx)(e.a,{href:"https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint",children:"Stylelint"})," \u8f14\u52a9\u958b\u767c\u3002"]})}),"\n",(0,i.jsx)(e.admonition,{type:"warning",children:(0,i.jsxs)(e.p,{children:["\u4e0d\u8ad6\u662f eslint\u3001prettier\u3001stylelint\uff0c\u6211\u90fd\u6709 ignore \u4e00\u500b ",(0,i.jsx)(e.code,{children:"dist"}
1)," \u8cc7\u6599\u593e\uff0c\u56e0\u70ba\u9019\u500b\u8cc7\u6599\u593e\u662f\u7de8\u8b6f\u5f8c\u7684\u7d50\u679c\uff0c\u4e0d\u9700\u8981\u518d\u6aa2\u67e5\u3002"]})}),"\n",(0,i.jsx)(e.h2,{id:"vuetify-optional---ui-\u6846\u67b6",children:"Vuetify (optional) - UI \u6846\u67b6"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:"\u5b89\u88dd Vuetify"}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-powershell",children:"pnpm i -D vuetify vite-plugin-vuetify\npnpm i @mdi/font\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"2",children:["\n",(0,i.jsxs)(e.li,{children:["\u8a2d\u5b9a ",(0,i.jsx)(e.code,{children:"nuxt.config.ts"}),"\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'\nexport default defineNuxtConfig({\n //...\n build: {\n transpile: ['vuetify'],\n },\n modules: [\n (_options, nuxt) => {\n nuxt.hooks.hook('vite:extendConfig', (config) => {\n // @ts-expect-error\n config.plugins.push(vuetify({ autoImport: true }))\n })\n },\n //...\n ],\n vite: {\n vue: {\n template: {\n transformAssetUrls,\n },\n },\n },\n})\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"3",children:["\n",(0,i.jsxs)(e.li,{children:["\u6839\u76ee\u9304\u5efa\u7acb ",(0,i.jsx)(e.code,{children:"~/plugins/vuetify.ts"}),"\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"// import this after install `@mdi/font` package\nimport '@mdi/font/css/materialdesignicons.css'\n\nimport 'vuetify/styles'\nimport { createVuetify }
1 from 'vuetify'\n\nexport default defineNuxtPlugin((app) => {\n const vuetify = createVuetify({\n // ... your configuration\n })\n app.vueApp.use(vuetify)\n})\n"})}),"\n",(0,i.jsxs)(e.ol,{start:"4",children:["\n",(0,i.jsxs)(e.li,{children:["\u65bc ",(0,i.jsx)(e.code,{children:"app.vue"})," \u5f15\u7528\uff1a"]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-xml",children:'<template>\n <NuxtLayout>\n <v-app>\n <NuxtPage />\n </v-app>\n </NuxtLayout>\n</template>\n\n<style lang="scss">\n\x3c!-- \u96b1\u85cf vuetify \u81ea\u52d5\u7522\u751f\u7121\u610f\u7fa9\u7684 scroll bar --\x3e\nhtml {\n overflow-y: auto;\n}\n</style>\n'})}),"\n",(0,i.jsx)(e.h2,{id:"reference",children:"Reference"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://clairechang.tw/2023/06/30/nuxt3/nuxt-v3-typescript-and-eslint/",children:"Nuxt.js 3.x ESLint \u7a0b\u5f0f\u78bc\u898f\u7bc4\u8207\u81ea\u52d5\u6392\u7248\uff0d\u642d\u914d TypeScript"})}),"\n"]})]})}function x(n={}){const{wrapper:e}={...(0,l.R)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(a,{...n})}):a(n)}},28453:(n,e,t)=>{t.d(e,{R:()=>r,x:()=>o});var s=t(96540);const i={},l=s.createContext(i);function r(n){const e=s.useContext(l);return s.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function o(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(i):n.components||i:r(n.components),s.createElement(l.Provider,{value:e},n.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.