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

拼搏现实的明天。 2023-09-25 18:58 112阅读 0赞

本文将介绍如何搭建一个使用 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 的项目，并提供了相应的代码。希望这篇文章对你有所帮助。