前言
最近,尤大发布了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-md
markdown渲染 -
🥘 支持
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
</