从零开始搭建 Vue 3+Vite+TypeScript+Pinia+Vue Router+SCSS+StyleLint+CommitLint+...项目

最新推荐文章于 2025-03-19 22:04:46 发布

前端77

最新推荐文章于 2025-03-19 22:04:46 发布

阅读量777

点赞数 15

文章标签： typescript vue.js scss

本文链接：https://blog.youkuaiyun.com/gaotlantis/article/details/144674091

版权

结合 Vue 3、Vite、TypeScript、Pinia、Vue Router、SCSS、StyleLint、CommitLint、Husky 和 Lint-Staged，让你的开发体验更加顺畅！💻✨

环境准备

在开始之前，请确保你的开发环境中已安装以下工具：

Node.js (建议使用 LTS 版本)
npm 或 yarn

你可以通过以下命令检查 Node.js 和 npm 的版本：

node -v
npm -v

创建项目

首先，我们使用 Vite 创建一个新的 Vue 3 + ts 项目。打开终端，执行以下命令：

npm create vite@latest my-vue-app --template vue-ts

进入项目目录：

cd my-vue-app

安装依赖

接下来，我们需要安装一些必要的依赖。执行以下命令安装核心依赖：

npm install pinia vue-router

npm install pinia vue-router

然后，为了在开发环境中使用样式和代码风格检查工具，我们需要安装以下开发依赖：

npm install --save-dev sass stylelint stylelint-config-standard husky commitlint @commitlint/config-conventional lint-staged eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

配置 TypeScript

Vite 默认会为我们配置 TypeScript，但我们可以根据需要进行一些调整。打开 tsconfig.json 文件，确保以下配置存在：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

设置 Vue Router

在 src 目录下创建一个 router 文件夹，并在其中创建 index.ts 文件：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

然后在 main.ts 中引入并使用 Vue Router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

使用 Pinia 状态管理

在 src 目录下创建一个 stores 文件夹，并在其中创建 index.ts 文件：

import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

然后在 main.ts 中引入并使用 Pinia：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import pinia from './stores';

createApp(App).use(router).use(pinia).mount('#app');

SCSS 配置

在 src 目录下创建一个 styles 文件夹，并在其中创建 main.scss 文件：

$primary-color: #42b983;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
}

在 main.ts 中引入 SCSS 文件：

import './styles/main.scss';

ESLint 配置

在项目根目录下创建 .eslintrc.js 文件，添加以下内容：

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  rules: {
    'vue/multi-word-component-names': 'off', // 关闭组件名称多词规则
    'indent': ['error', 2], // 强制使用2个空格缩进
    'quotes': ['error', 'single'], // 强制使用单引号
  },
};

代码风格检查与提交规范

StyleLint

在项目根目录下创建 .stylelintrc.json 文件，添加以下内容：

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "single"
  }
}

CommitLint

在项目根目录下创建 commitlint.config.js 文件，添加以下内容：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'header-max-length': [2, 'always', 72], // 限制提交信息的最大长度为72个字符
    'type-case': [2, 'always', ['lower-case', 'upper-case']],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'merge',
        'test',
        'chore',
        'revert',
        'build',
        'ci',
        'perf'
      ]

    ],
  }
};

Husky 和 Lint-Staged

初始化 Husky：

npx husky install

添加 Git 提交钩子：

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

接下来，配置 Lint-Staged。在项目根目录下创建 lint-staged.config.js 文件，添加以下内容（可以创建配置文件或者直接在package.json配置二选一）：

module.exports = {
  '*.{js,jsx,ts,tsx,vue}': 'eslint --fix',
  '*.scss': 'stylelint --fix',
};

在 package.json 中配置 Lint-Staged

在 package.json 文件中添加以下内容，以便将 Lint-Staged 集成到 Husky 的 pre-commit 钩子中：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
   "src/**/*.{js,ts,tsx,jsx,vue}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "package.json": [
      "prettier --write",
      "git add"
    ],
    "*.md": [
      "prettier --write",
      "git add"
    ],
    "*.scss": "stylelint --fix"
  }
}