Nuxt3 專案初始化
建立專案
- 建立 Nuxt3 專案
npx nuxi@latest init <project-name>
- 安裝專案初始套件
pnpm install
tip
現在很多人都很愛用 SCSS 來寫 CSS，所以需要的話請額外安裝：
pnpm install sass
Pinia - 全域資料管理工具
- 安裝 Pinia
pnpm install pinia @pinia/nuxt
- 修改 Nuxt3 配置：
nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
modules: [
[
"@pinia/nuxt",
{
autoImports: ["defineStore", ["defineStore", "definePiniaStore"]],
},
],
],
});
Tailwind CSS (optional) - CSS 編輯
這裡必須安裝 Nuxt3 的版本 @nuxtjs/tailwindcss：
pnpm dlx nuxi module add @nuxtjs/tailwindcss
pnpm dlx tailwindcss init
tip
安裝 Tailwind CSS IntelliSense 輔助開發。
Eslint - 程式碼語法檢查
- 安裝 Eslint，在 Nuxt3 尚須額外安裝 @nuxt/eslint-config：
pnpm add -D eslint @nuxt/eslint-config
- root 下建立一個 .eslintrc.cjs，並輸入內容：
.eslintrc.cjs
module.exports = {
root: true,
extends: ["@nuxt/eslint-config"],
ignorePatterns: ["dist/"]
};
- 修改 package.json：
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
}
- 更改 VScode 配置 - 使用 ctrl+shift+p 搜尋 Open Workspace Settings (JSON)：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
tip
安裝 ESLint 輔助開發。
Prettier - 維持程式碼格式 (尤其是 Tailwind CSS 的排序)
- 安裝 Prettier 跟插件：
prettier: 主要的代碼格式化工具。prettier-plugin-tailwindcss: 整合Tailwind CSS。eslint-config-prettier: 關閉所有不必要或可能與 Prettier 衝突的ESLint規則。eslint-plugin-prettier: 將Prettier作為ESLint規則運行。
pnpm install -D prettier prettier-plugin-tailwindcss eslint-config-prettier eslint-plugin-prettier
- 建立 .prettierrc.cjs 檔案：
module.exports = {
plugins: [
'prettier-plugin-tailwindcss'
],
printWidth: 80,
semi: false,
singleQuote: true,
trailingComma: 'none',
bracketSpacing: true,
arrowParens: "always",
bracketSameLine: false,
endOfLine: "auto",
htmlFormat: "auto",
javascriptFormat: "auto",
}
- 前往 .eslintrc.cjs 做 prettier 引入：
module.exports = {
root: true,
extends: ['@nuxt/eslint-config', 'prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error'
},
ignorePatterns: ["dist/"]
}
tip
安裝 Prettier - Code formatter 輔助開發。
Stylelint - 維持 CSS、SCSS 等樣式程式碼整齊
- 安裝 Stylelint：
pnpm install --save-dev stylelint stylelint-config-standard
- 安裝 SCSS 跟 Vue 的規範：
pnpm install --save-dev stylelint-config-standard-scss stylelint-config-standard-vue stylelint-order postcss postcss-scss postcss-html
- 安裝 @nuxtjs/stylelint-module：
pnpm add -D @nuxtjs/stylelint-module
- 調整 nuxt.config.ts 配置：
nuxt.config.ts
export default {
modules: [
'@nuxtjs/stylelint-module',
]
}
- root 下建立 .stylelintrc.cjs 並輸入：
完整配置
module.exports = {
extends: [
"stylelint-config-standard",
'stylelint-config-standard-scss',
"stylelint-config-standard-vue/scss"
],
plugins: [
'stylelint-order'
],
ignoreFiles: ["dist/**/*"],
"fix": true, // 自動修復
overrides: [
{
files: [ '*.scss', '**/*.scss', "*.vue", "**/*.vue" ],
rules: {
'scss/no-global-function-names': null // 關閉 scss 全域函式名稱檢查
}
}
],
rules: {
'unit-allowed-list': [ 'em', 'rem', 'deg', 'px', 'vh', 'vw', '%', 's', 'ms', 'fr' ],
'order/properties-order': [
'position',
'top',
'bottom',
'right',
'left',
'display',
'align-items',
'justify-content',
'float',
'clear',
'overflow',
'overflow-x',
'overflow-y',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'font-size',
'font-family',
'font-weight',
'text-align',
'text-justify',
'text-indent',
'text-overflow',
'text-decoration',
'white-space',
'color',
'background',
'background-position',
'background-repeat',
'background-size',
'background-color',
'background-clip',
'border',
'border-style',
'border-width',
'border-color',
'border-top-style',
'border-top-width',
'border-top-color',
'border-right-style',
'border-right-width',
'border-right-color',
'border-bottom-style',
'border-bottom-width',
'border-bottom-color',
'border-left-style',
'border-left-width',
'border-left-color',
'border-radius',
'opacity',
'filter',
'list-style',
'outline',
'visibility',
'z-index',
'box-shadow',
'text-shadow',
'resize',
'transition'
]
}
}
- 修改 vscode/settings.json：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.fixAll.stylelint": "explicit"
},
"stylelint.validate": [ "css", "scss", "vue" ]
}
tip
這個 vscode/settings.json 就是在設定 eslint 時產生的。
tip
安裝 Stylelint 輔助開發。
warning
不論是 eslint、prettier、stylelint，我都有 ignore 一個 dist 資料夾，因為這個資料夾是編譯後的結果，不需要再檢查。
Vuetify
- 安裝 Vuetify
pnpm i -D vuetify vite-plugin-vuetify
pnpm i @mdi/font
- 設定 nuxt.config.ts：
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineNuxtConfig({
//...
build: {
transpile: ['vuetify'],
},
modules: [
(_options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) => {
// @ts-expect-error
config.plugins.push(vuetify({ autoImport: true }))
})
},
//...
],
vite: {
vue: {
template: {
transformAssetUrls,
},
},
},
})
- 根目錄建立 ~/plugins/vuetify.ts：
// import this after install `@mdi/font` package
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
export default defineNuxtPlugin((app) => {
const vuetify = createVuetify({
// ... your configuration
})
app.vueApp.use(vuetify)
})
- 於 app.vue 引用：
<template>
<NuxtLayout>
<v-app>
<NuxtPage />
</v-app>
</NuxtLayout>
</template>
<style lang="scss">
<!-- 隱藏 vuetify 自動產生無意義的 scroll bar -->
html {
overflow-y: auto;
}
</style>