如何使用Vite4 Vue3 TypeScript Pinia ESLint StyleLint 记录项目配置过程和代码

本文将介绍如何搭建一个使用 Vite4、Vue3、TypeScript、Pinia、ESLint 和 StyleLint 的项目，并提供相应的代码。

步骤一：创建项目

首先，我们需要创建一个项目文件夹并进入该文件夹。然后，我们可以使用以下命令初始化一个新的项目：

npm init -y

接下来，我们需要安装 Vite4：

npm install vite --save-dev

然后，我们需要使用以下命令安装 Vue3 和 TypeScript：

npm install vue@next typescript --save-dev

步骤二：安装 Pinia

接下来，我们需要使用以下命令安装 Pinia：

npm install pinia@beta --save

步骤三：安装 ESLint 和 StyleLint

最后，我们需要使用以下命令安装 ESLint 和 StyleLint：

npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

npm install stylelint stylelint-order stylelint-config-standard stylelint-config-prettier stylelint-config-recommended --save-dev

步骤四：配置项目

在项目根目录创建一个 .eslintrc.js 文件，内容如下：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {},
};

在项目根目录创建一个 .stylelintrc.js 文件，内容如下：

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended',
    'stylelint-config-prettier',
  ],
  plugins: ['stylelint-order'],
  rules: {
    'order/order': ['custom-properties', 'declarations'],
    'order/properties-alphabetical-order': true,
    'declaration-empty-line-before': 'never',
  },
};

在项目根目录创建一个 tsconfig.json 文件，内容如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "esModuleInterop": true,
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

步骤五：创建组件

现在，我们已经完成了项目的配置。接下来，我们可以创建一个组件并将其添加到 App.vue 文件中。以下是一个简单的示例组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from 'pinia';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const store = useStore();

    return {
      message: 'Hello World!',
      count: store.state.count,
      increment: store.increment,
    };
  },
});
</script>

现在，我们可以将组件添加到 App.vue 文件中：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
  },
});
</script>

步骤六：运行项目

现在，我们已经完成了项目的配置和创建组件。接下来，我们可以使用以下命令运行项目：

npm run dev

结论

本文介绍了如何搭建一个使用 Vite4、Vue3、TypeScript、Pinia、ESLint 和 StyleLint 的项目，并提供了相应的代码。希望这篇文章对你有所帮助。