「Vue3」手把手教你使用 Vite 快速搭建项目

原创

已于 2022-11-29 10:58:07 修改 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-11-29 10:52:53 首次发布

本文介绍了如何使用Vite初始化Vue3项目，详细讲解了配置vite.config.ts、tsconfig.json、git提交检查、eslint、prettier以及style规则的过程，旨在帮助开发者快速上手Vue3项目开发，并设置了CICD流程。

本项目选型默认使用vue3 + typescript + vite

1. 使用vite初始化项目

vite创建地址，创建完成后有一个基本的项目结构了，如下图
在这里插入图片描述

2. 配置vite.config.ts，配置详解

import { defineConfig } from 'vite'

import path from 'path';

import vue from '@vitejs/plugin-vue'

import vueJsx from '@vitejs/plugin-vue-jsx'



// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue(), vueJsx()],

  resolve: {

  //设置文件路径解析,需要配合tsconfig.json的paths结合解析

    alias: {

      '@': path.resolve(__dirname, 'src'),

      components: path.resolve(__dirname, 'src/components'),

    }

  },

  //相关打包配置

  build: {

    sourcemap: true,

    // Turning off gzip-compressed size display can slightly reduce packaging time

    reportCompressedSize: false,

    chunkSizeWarningLimit: 2000,

  },

  //服务器相关配置，vite３默认端口5173

  server: {

    host: true,

  }

})

发现报错了　Cannot find module path or its corresponding type declarations

那么需要安装@types/node并且在tsconfig.json中的types中添加’node’，如下配置

3. 配置tsconfig.json

{

  "compilerOptions": {

    "rootDir": ".", //　根目录地址

    "target": "ESNext",　// 指定 ECMAScript 目标版本

    "useDefineForClassFields": true,　// 对类字段使用定义

    "noImplicitAny": false, // 在表达式和声明上有隐含的 any类型时不报错

    "module": "ESNext", // 指定使用模块

    "moduleResolution": "Node", // 选择模块解析策略： 'node' (Node.js)

    "strict": true, // 启用所有严格类型检查选项

    "jsx": "preserve", // 指定 jsx 代码的生成

    "sourceMap": true, // 生成相应的 '.map' 文件

    "resolveJsonModule": true, // 解析 JSON 模块

    "isolatedModules": true, // 将每个文件作为单独的模块

    "esModuleInterop": true, // ES 模块互操作

    "lib": ["ESNext", "DOM"], // 指定要包含在编译中的库文件

    "skipLibCheck": true, // 过默认库检查

    "types": ["node", "naive-ui/volar"],　// 需要包含的类型声明文件名列表

    "baseUrl": ".",　// 用于解析非相对模块名称的基目录

    "importHelpers": true,　// 导入帮助

    "strictNullChecks": true,　// 启用严格的 null 检查

    "allowSyntheticDefaultImports": true,　// 允许合成默认导入

    "allowJs": false, //允许js文件

    "noEmit": true, // 不要发出编译器输出文件

    "paths": { //路径映射

      "@/*": ["src/*"],

      "components/*": ["src/components/*"]

    }

  },

  //指定需要包含的文件

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

  "references": [{ "path": "./tsconfig.node.json" }] // 引用其他tsconfig配置，参考

}

4. 配置git提交检查

前端一般使用yorkie和husky来对git提交进行lint检查，差异可看yorkie的文档介绍

npm install yorkie lint-staged --save-dev

//在package.json中配置

"gitHooks": {

    "pre-commit": "lint-staged",

    "commit-msg": "node scripts/verifyCommit.js"

  },

 "lint-staged": {

    "*.{js,jsx,ts,tsx}": [

      "eslint --fix",

      "prettier --write"

    ],

    "package.json": [

      "prettier --write"

    ],

    "*.vue": [

      "eslint --fix",

      "prettier --write",

      "stylelint --fix"

    ],

    "*.{scss,less,styl,html}": [

      "stylelint --fix",

      "prettier --write"

    ],

    "*.md": [

      "prettier --write"

    ]

  }

scripts里面的erifyCommit.js和.github/commit-convention.md文件参考vue3

5. 配置eslint进行代码规范化

pnpm add -D eslint @antfu/eslint-config　eslint-plugin-prettier　eslint-config-prettier //直接安装使用即可

module.exports = {

  "extends": [

      "@antfu",

      "prettier" //eslint走prettier,关闭所有不必要或可能与Prettier冲突的规则，eslint-config-prettier

      "plugin:prettier/recommended"　// 其实是一些已经配置好的规则插件等，使用recommended配置

  ]

}