搭建你的项目脚手架 — vue3.x + typescript4.x + vite2.x + pinia2.x

前言

到现在为止，已经有不少团队和项目都已经正式使用 vue3 + vite + typescript 进行企业级的项目开发了，本文主要介绍下如何搭建一套相应的前端工程化项目环境，终是 “纸上得来终觉浅，绝知此事要躬行”。

若你想了解更多，源码的地址

基本项目结构

快速创建项目

通过 npm create vite@latest命令创建基本的项目：

目录结构：

默认启动页面：

现在，我们已经拥有了一个最基本项目结构了，接下来我们只需要为其 “添砖加瓦” 即可。

代码规范

配置 editorconfig

目的是为了保证不同开发人员在 不同操作系统 上拥有一致的编码风格，例如同样是换行符，在不同系统上表现是不一样的，又或者是不同人员在不同的编辑器上使用的缩进方式不同等，都很容易导致代码风格不统一的问题。

• 配置 editorconfig 文件，可参考 Vue2.x 中的配置
• 如果使用的是 VScode 编辑器，需要安装插件：EditorConfig for VScode
• 如果使用的是 WebStorm 编辑器，不需要安装 EditorConfig 插件，因为其内部已经默认集成了，所以只需要开启支持即可。

测试效果如下，其中是通过 Tab 键产生的缩进：

配置 eslint

ESLint 能够帮助开发者在编码过程中及时给予不符合代码规范的提示，它和下面的 prettier 作用的时机是不一样的。

• 安装依赖 npm install eslint --save-dev

• 可通过 npm init @eslint/config 命令设置配置文件

  

• 上一步操作完成后会得到 .eslintrc.js 文件，可通过此文件修改配置

• 配置 scripts 脚本命令： "lint": "eslint --fix --ext .ts,.vue src" 提供自动修复功能

• 通过 eslint-plugin-vue 解决 eslint 认为 defineProps 未定义错误，如下：
  

• 修改 .eslintrc.js 配置文件，如下：

  env: {
       
      ...
     'vue/setup-compiler-macros': true,
   }
  

配置完成后