2022年大厂必备，开箱即用的vue3+vite+ts最强模板

前言

最近，尤大发布了Vue3成为默认版本的消息，意味着vue3将成为社区维护的主要方向。 为了让更多的小伙伴快速进入vue3，我在Github发起了一个开源模板fast-vue3，以提供开箱即用的脚手架，快速渡过一档起步(各种配置)，直接体验加速阶段（实际项目）。配置本身并没有什么难度，后面用到再阅读文档即可。

FastVue3

fast-vue3，是Vue3+Vite2.7+TypeScript+Pinia等Vue的开发工具链。整理了当前比较主流的工具链，可以直接开箱使用，方便小伙伴学习，最好的学习方式——边用边学边学边用~

不是轮子，是模板工具哦~

特点

• 💕 fast-vue3就不赘述了，框架基座支持Vue3+Vite2.7+TypeScript+Pinia

• 🔌 支持husky和 lint-staged，大厂团队代码规范协作必备

• 🖼️ 支持svg图标，已封装一个简单的SvgIcon组件，可以直接读取文件下的svg

• ⚙️ 支持Plop，代码文件自动生成，提供三种预设模板pages,components,store等可自定义

• 📦 支持axios(ts版),已封装了主流的拦截器，请求调用等方法

• 👽 支持router,store模块化，内置生成路由钩子

• 🐳 支持env，环境变量和区分打包环境

• 🍡支持unplugin-vue-components组件自动引入

• 🏗 支持vw/vh移动端布局兼容，也可以使用plop自己配置生成文件

• 📱 支持vite-plugin-mdmarkdown渲染

• 🥘 支持vite-plugin-pages根据文件自动生成路由的插件

• 🎉 目前正在收集更多提效工具，持续添加中…

使用

一键三连: Star 或 Fork 或 可视化仓库

# 拉取仓库代码
git clone  https://github.com/MaleWeb/fast-vue3.git

# 进入项目文件夹
cd fast-vue3 

# 安装项目依赖
pnpm install

# 运行
pnpm run dev

如果不报错，恭喜你点火成功。否则，请看下面常见问题。

如果你已经了解本模板，建议你拉取 template 分支进行项目开发，该分支不含任何示例代码。

# clone  template 分支
git clone -b template https://github.com/MaleWeb/fast-vue3.git

配置

为了方便其他小伙伴了解配置，这里简单介绍一些核心部分。资料部分也有详细的配置，建议大家直接阅读官方文档。关于vite vue pinia的配置见可视化仓库

TypeScript

TS几乎已然成为了大厂必备技能，这两年也频繁出现在面试题与高级前端考核中。所以，我果断默认了TS。可能对一些小伙伴比较残忍，学吧。

   # 安装ts相关依赖
   pnpm add @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser

根目录配置tsconfig.json

{
   
  "compilerOptions": {
   
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "node"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "**/*.ts"
  ]
}

代码规范

目前多数大厂团队使用husky + lint-staged来约束代码规范，通过pre-commit实现lint检查、单元测试、代码格式化等。 IDE 配置（.editorconfig）、ESLint 配置（.eslintrc.js 和 .eslintignore）、StyleLint 配置（.stylelintrc 和 .stylelintignore），详细请看对应的配置文件。

关闭代码规范
如果不想使用，将 src/ 目录分别加入 .eslintignore 和 .stylelintignore 进行忽略即可。

SVG支持

随着浏览器兼容性的提升，SVG的性能逐渐凸显，很多大厂团队都在创建自己的SVG管理库，后面工具库会有推荐。

这里将svg组件化，正好算是一个小demo。创建文件夹src/asstes/icons/svg，将svg图标放在svg下面，通过name即可使用。

# 安装svg依赖
pnpm add vite-plugin-svg-icons

配置vite.config.ts</