vite+ts+eslint搭建vue3.0开发模版

flee-lether

已于 2022-04-20 23:20:53 修改

阅读量4.4k

点赞数

分类专栏： vuejs vite web 文章标签： vue.js

于 2021-03-19 16:59:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_23398171/article/details/115010584

版权

本文介绍了如何使用vite、typescript和eslint搭建Vue3.0项目模板，包括创建项目文件夹、配置vite、添加typescript支持、设置eslint和prettier规则，以及整合stylelint、git commit规范和editorconfig。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文模版地址

创建项目文件夹，执行 npm 初始化命令

mkdir project
cd project
npm init -y

安装 vite

npm i vite -D

安装 vite vue 支持

npm i vue@next @vue/compiler-sfc # vue框架
npm i -D @vitejs/plugin-vue # vite 解析vue文件

配置 vite vue 支持

新建 vite.config.js 文件

import * as path from 'path';
import {
    defineConfig } from 'vite';
import VuePlugin from '@vitejs/plugin-vue';

export default defineConfig({
   
    plugins: [VuePlugin()],
    resolve: {
   
        alias: {
   
            // 配置别名
            '@': path.resolve(__dirname, './src')
        }
    }
});

添加 typescript 支持

npm i -D typescript @vuedx/typecheck @vuedx/typescript-plugin-vue

@vuedx/typecheck 和@vuedx/typescript-plugin-vue 不安装似乎也没啥影响，npm 上的描述是一个命令行检查 vue 项目的工具。在我的理解中一般使用于 githooks。

配置tsconfig.json

{
   
    "compilerOptions": {
   
        "target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
        "module": "ESNEXT" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
        "jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
        "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
        "lib": ["esnext", "dom"],
        /* Strict Type-Checking Options */
        "strict": true /* Enable all strict type-checking options. */,
        /* Module Resolution Options */
        "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
        "types": ["vite/client"] /* Type declaration files to be included in compilation. */,
        // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
        /* Advanced Options */
        "skipLibCheck": true /* Skip type checking of declaration files. */,
        "forceConsistentCasingInFileNames"

最低0.47元/天解锁文章