Nuxt3+TypeScript+Vite项目模板搭建（TypeScript、ESLint、Prettier、Sass、Stylelint、husky、Vite、pnpm 配置）【图文详细教程】

# 安装npx如果还没有安装
npm install -g npx
 
# 使用npx通过模板创建项目
npx create-nuxt-app <项目名>
 
# 进入项目目录
cd <项目名>
 
# 安装TypeScript
npm install --save-dev typescript @nuxt/typescript-build
 
# 添加Sass和Stylelint支持
npm install --save-dev sass postcss@nesting @nuxt/postcss8 @nuxtjs/style-resources
npm install --save-dev stylelint stylelint-config-standard
 
# 在nuxt.config.ts中添加以下配置
export default defineNuxtConfig({
  // ... 其他配置
  buildModules: [
    // ... 其他模块
    '@nuxt/postcss8',
    '@nuxtjs/style-resources',
  ],
  stylelint: {
    // Stylelint 配置文件路径
    configFile: '.stylelintrc.js',
    // 监控文件变化
    on: 'watch',
  },
  build: {
    loaders: {
      scss: {
        // 添加SASS支持
        additionalData: `@import "@/assets/scss/variables.scss";`
      }
    },
    // 在style中使用scss
    styleResources: {
      scss: ['@/assets/scss/variables.scss']
    },
  },
  // ... 其他配置
});
 
# 创建.stylelintrc.js和variables.scss文件

上述脚本提供了一个基本的示例，展示了如何使用npx create-nuxt-app创建一个Nuxt3项目，并逐步添加TypeScript、ESLint、Prettier、Sass支持以及Stylelint。同时，在Nuxt3的配置文件中，我们还演示了如何集成@nuxt/postcss8模块以及@nuxtjs/style-resources来支持全局SCSS变量。这个过程是构建现代Web应用的一个很好的起点。