使用Vite创建VUE3+TS+Eslint+Prettier+Pinia+VueRouter+Axios项目

1. 创建一个vite项目

pnpm create vite

√ Project name: ... (项目名)
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in D:\vite-project...

Done. Now run:

  cd (项目名)
  pnpm install   
  pnpm run dev

2. Eslint+Prettier安装及配置

2.1 Eslint安装及初始化

pnpm add -D eslint

npx eslint --init

// 初始化选项
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm
Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest

// package.json 添加脚本
"scripts": {
	"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
},

// 测试运行
pnpm lint
// 有报错,先不管
> vite-project@0.0.0 lint D:\vite-project
> eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix
D:\vite-project\src\App.vue
  1:8  error  Parsing error: '>' expected
D:\vite-project\src\components\HelloWorld.vue
  1:8  error  Parsing error: '>' expected
✖ 2 problems (2 errors, 0 warnings)
 ELIFECYCLE  Command failed with exit code 1.

2.2 Prettier安装及配置

pnpm add -D prettier eslint-plugin-prettier eslint-config-prettier

// .editorconfig 根目录下创建
# https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
indent_style = tab
insert_final_newline = false
trim_trailing_whitespace = false

// .prettierrc.cjs 根目录下创建
module.exports = {
    printWidth: 80, // 单行长度
    tabWidth: 4, // 缩进长度
    useTabs: false, // 使用空格代替tab缩进
    semi: false, // 句末使用分号
    singleQuote: true, // 使用单引号
}

// .eslintrc.cjs 修改
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
        'vue/setup-compiler-macros': true,
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
    ],
    overrides: [],
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 'latest',
        parser: '@typescript-eslint/parser',
        sourceType: 'module',
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {},
}

// package.json 添加脚本
"scripts": {
	"format": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}"
},

// 测试运行
pnpm format

// 运行结果
> vite-project@0.0.0 format D:\vite-project
> prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}
.vscode\extensions.json 47ms
package.json 6ms
README.md 53ms
src\App.vue 249ms
src\components\HelloWorld.vue 49ms
src\main.ts 7ms
src\style.css 19ms
src\vite-env.d.ts 9ms
tsconfig.json 6ms
tsconfig.node.json 3ms
vite.config.ts 6ms

3. 基础依赖(Pinia+VueRouter+Axios)

3.1 Pinia安装

pnpm add pinia pinia-plugin-persistedstate

// main.ts 修改
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

createApp(App).use(createPinia().use(piniaPluginPersistedstate)).mount('#app')

3.1 VueRouter安装及配置

pnpm add vue-router

// App.vue 修改
<script setup lang="ts"></script>

<template>
    <router-view />
</template>

<style scoped lang="scss"></style>

// src目录下新建views文件夹
// 新建 index.vue 文件随便添加点内容

<script setup lang="ts">
import HelloWorld from '../components/HelloWorld.vue'
</script>

<template>
    <div>
        <a href="https://vitejs.dev" target="_blank">
            <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a href="https://vuejs.org/" target="_blank">
            <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
        </a>
    </div>
    <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

// main.ts 修改
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

// 路由
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'index',
        component: () => import('./views/index.vue'),
        meta: {
            title: '首页',
        },
    },
]

createApp(App)
    .use(createPinia().use(piniaPluginPersistedstate))
    .use(
        createRouter({
            history: createWebHashHistory(),
            routes: routes,
        })
    )
    .mount('#app')

3.2 Axios安装及配置

pnpm add axios

// src 下新建目录utils 
// 新建axios.ts文件
import axios, { AxiosRequestConfig } from 'axios'

/*
 * 创建Axios请求
 */
export const createAxios = (axiosConfig: AxiosRequestConfig) => {
    const Axios = axios.create({
        baseURL: '',
        timeout: 1000 * 10,
        headers: {
            'Content-Type': 'application/json',
        },
        responseType: 'json',
        method: 'POST',
    })
    // 请求拦截
    Axios.interceptors.request.use(
        (config) => {
            // 请求前处理
            return config
        },
        (error) => {
            return Promise.reject(error)
        }
    )

    // 响应拦截
    Axios.interceptors.response.use(
        (response) => {
            // 响应成功处理
            return response.data
        },
        (error) => {
            return Promise.reject(error)
        }
    )
    return Axios(axiosConfig)
}