Vue3、Vite5、Primevue、Oxlint、Husky9 简单快速搭建最新的Web项目模板

无人扶我青云志，我自踏雪至山巅

作者GitHub：https://github.com/gitboyzcf 有兴趣可关注！！！

特色

• ⚡️ Vue 3、 Vite 5、pnpm

• 📦 组件自动化引入

• 🍍 使用 Pinia 的状态管理

• 🌈 Primevue - Vue.js UI 套件，提高开发效率

• 🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

• 😃 各种图标集为你所用

• 🔥 使用 新的 <script setup> 语法

• 📥 API 自动加载 - 直接使用 Composition API 无需引入

• 🌍 API 采用模块化自动导入方式 根据demo.js文件设置接口，以API_xxx_method的方式命名，在请求时无需导入 直接使用useRequest()函数返回参数以解构的方式获取，拿到即为写入的接口

• 💥 Oxlint（英）+ ESLint（英） - 双管齐下，享受高速度、强检查的代码格式化效果

• 🐶 husky + lint-staged - Git提交自动检测格式化代码，解放双手

• 🎢 无TS，释放你的野性

进入正题

node版本必须是 >=18.18.0

创建基础模板

pnpm create vite my-vue-app --template vue

详细请看➡️https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

得到以下目录结构⬇️

配置API自动化导入

安装依赖

pnpm i unplugin-auto-import -D

在vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({imports: ['vue','vue-router','pinia','@vueuse/core',// 自动导入 自定义函数// {// '@/api': ['useRequest']// },],eslintrc: {enabled: true, // Default `false`  启动项目后 会在根目录下生成 eslintrc-auto-import.json文件 生成后可改为false 避免每次生成 慢 filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')}}),],
})

此时在App.vue中不用引入直接可以使用Vue的api

<script setup>const title = ref('Hello World!')
</script>

配置组件自动化导入

安装依赖

pnpm i unplugin-vue-components -D

在vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),Components({dirs: ['src/components'],dts: false,resolvers: [],include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/]}),],
})

src/components下新建 的组件 ，此时在App.vue中不用引入直接可以使用

<template><div><HelloWorld msg="Hello Vue 3.0 + Vite" /></div>
</template><script setup></script>

配置UnoCss

安装依赖

pnpm i unocss -D

直接插入以下代码⬇️（没有对应文件的自行创建）

unocss.config.js

import {defineConfig,presetAttributify,presetIcons,presetTypography,presetUno,presetWebFonts,transformerDirectives,transformerVariantGroup
} from 'unocss'// https://unocss.dev/guide/config-file
export default defineConfig({shortcuts: [// ...],theme: {colors: {// ...}},presets: [presetUno(),presetAttributify(),presetIcons(),presetTypography(),presetWebFonts({fonts: {// ...}})],transformers: [transformerDirectives(), transformerVariantGroup()]
})

在main.js中引入样式

import { createApp } from 'vue'
import App from './App.vue'import './style.css'
import 'virtual:uno.css'async function bootstrap() {const app = createApp(App)app.mount('#app')
}
bootstrap()

在vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),// ...Unocss({}),// ...],
})

接入Primevue

安装依赖

pnpm add primevue @primevue/themes

在main.js中配置

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config' // +
import Nora from '@primevue/themes/nora' // +import './style.css'
import 'virtual:uno.css'async function bootstrap() {const app = createApp(App)// +app.use(PrimeVue, { theme: {preset: Nora}})app.mount('#app')
}
bootstrap()

在vite.config.js中配置组件自动导入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { PrimeVueResolver } from '@primevue/auto-import-resolver' // +// https://vite.dev/config/
export default defineConfig({plugins: [vue(),Components({dirs: ['src/components'],dts: false,resolvers: [PrimeVueResolver()], // +include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/]}),],
})

此时在App.vue中不用引入直接可以使用

<!-- https://primevue.org/button/#severity -->
<div class="card flex justify-center flex-wrap gap-4"><Button label="Primary" /><Button label="Secondary" severity="secondary" /><Button label="Success" severity="success" /><Button label="Info" severity="info" /><Button label="Warn" severity="warn" /><Button label="Help" severity="help" /><Button label="Danger" severity="danger" /><Button label="Contrast" severity="contrast" />
</div>

更多组件请看➡️ https://primevue.org/button/

接入VueRouter4

https://router.vuejs.org/zh/

安装依赖

pnpm i vue-router@4

创建以下文件夹以及文件

直接插入以下代码⬇️

helper.js

/*** 设置页面标题* @param {Object} to 路由对象*/
export const usePageTitle = (to) => {const projectTitle = import.meta.env.VITE_APP_TITLEconst rawTitle = normalizeTitle(to.meta.title)const title = useTitle()title.value = rawTitle ? `${projectTitle} | ${rawTitle}` : projectTitlefunction normalizeTitle(raw) {return typeof raw === 'function' ? raw() : raw}
}

index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import { usePageTitle } from './helper'// const whiteList = ['/login'] // 白名单
const router = createRouter({history: createWebHashHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'Test',// 注意： 此组件自行创建引入！！！！！！！！！component: () => import('@/views/demo/index.vue'),meta: {title: '测试'}},{path: '/:pathMatch(.*)*',// 注意： 此组件自行创建引入！！！！！！！！！component: () => import('@/views/system/404/404.vue'),meta: {title: '找不到页面'}}]
})router.beforeEach((to, from, next) => {usePageTitle(to)next()
})async function setupRouter(app) {app.use(router)
}export { setupRouter }

配置项目全局环境变量

具体请看 ➡️https://vite.dev/guide/env-and-mode.html#env-files

.env

# 生产环境# 页面名称
VITE_APP_TITLE = 演示项目# 项目localStorage存储前缀
VITE_APP_PREFIX = demo# 网络请求  -- 根据项目需求更改    下面⬇️配置axios需要用到
VITE_APP_API_BASEURL = /

.env.development

# 本地环境（开发环境）# 页面名称
VITE_APP_TITLE = 演示项目# 项目localStorage存储前缀
VITE_APP_PREFIX = demo# 网络请求    -- 根据项目需求更改    下面⬇️配置axios需要用到
VITE_APP_API_BASEURL = /

在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config'
import Nora from '@primevue/themes/nora'
import { setupRouter } from './router' // +import './style.css'
import 'virtual:uno.css'async function bootstrap() {const app = createApp(App)app.use(PrimeVue, {theme: {preset: Nora}})await setupRouter(app) // +app.mount('#app')
}
bootstrap()

封装Axios

Vite4、Vue3、Axios 针对请求模块化封装搭配自动化导入（简单易用）

接入Pinia状态管理

安装依赖

pnpm i pinia

创建以下文件夹以及文件

直接插入以下代码⬇️

index.js

import { createPinia } from 'pinia'
export const piniaStore = createPinia()
export function setupStore(app) {app.use(piniaStore)
}

demo.js

import { piniaStore } from '@/stores'
export const useCounterStore = defineStore('counter', () => {const count = ref(0)const doubleCount = computed(() => count.value * 2)function increment() {count.value++}return { count, doubleCount, increment }
})export function useOutsideCounterStore() {return useCounterStore(piniaStore)
}

接入Prerttier + OXLint + ESLint

安装依赖

pnpm i oxlint prettier eslint-plugin-oxlint eslint-plugin-prettier -D

安装并配置ESLint

pnpm create @eslint/config@latest

根据响应提示选择，以下是我的选择⬇️

执行完后会自动创建eslint.config.js配置文件，以及对应依赖包🤩

直接插入以下代码⬇️（没有对应文件的自行创建）

eslint.config.js

import path from 'path'
import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import VueEslintParser from 'vue-eslint-parser'
import prettier from 'eslint-plugin-prettier'
import oxlint from 'eslint-plugin-oxlint'
import { FlatCompat } from '@eslint/eslintrc'
import { fileURLToPath } from 'url'const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)const compat = new FlatCompat({baseDirectory: __dirname
})/** @type {import('eslint').Linter.Config[]} */
export default [{files: ['**/*.{js,mjs,cjs,vue}']},{languageOptions: {globals: {...globals.browser,...globals.node},parser: VueEslintParser}},/** js推荐配置 */pluginJs.configs.recommended,/** vue推荐配置 */...pluginVue.configs['flat/essential'],/** 继承自动导入配置 */...compat.extends('./.eslintrc-auto-import.json'),/** oxlint推荐配置 */oxlint.configs['flat/recommended'],/** 自定义eslint配置 */{rules: {'no-var': 'error', // 要求使用 let 或 const 而不是 var'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行'no-unexpected-multiline': 'error', // 禁止空余的多行'no-useless-escape': 'off', // 禁止不必要的转义字符'vue/multi-word-component-names': 0}},/*** prettier 配置* 会合并根目录下的prettier.config.js 文件* @see https://prettier.io/docs/en/options* https://github.com/prettier/eslint-plugin-prettier/issues/634*/{plugins: {prettier},rules: {...prettier.configs.recommended.rules}},// 忽略文件{ignores: ['**/dist','./src/main.ts','.vscode','.idea','*.sh','**/node_modules','*.md','*.woff','*.woff','*.ttf','yarn.lock','package-lock.json','/public','/docs','**/output','.husky','.local','/bin','Dockerfile']}
]

prettier.config.js

export default {// 一行的字符数，如果超过会进行换行，默认为80，官方建议设100-120其中一个数printWidth: 100,// 一个tab代表几个空格数，默认就是2tabWidth: 2,// 启用tab取代空格符缩进，默认为falseuseTabs: false,// 行尾是否使用分号，默认为true(添加理由:更加容易复制添加数据,不用去管理尾行)semi: false,vueIndentScriptAndStyle: true,// 字符串是否使用单引号，默认为false，即使用双引号，建议设true，即单引号singleQuote: true,// 给对象里的属性名是否要加上引号，默认为as-needed，即根据需要决定，如果不加引号会报错则加，否则不加quoteProps: 'as-needed',// 是否使用尾逗号，有三个可选值"<none|es5|all>"trailingComma: 'none',// 在jsx里是否使用单引号，你看着办jsxSingleQuote: true,// 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }bracketSpacing: true,proseWrap: 'never',htmlWhitespaceSensitivity: 'strict',endOfLine: 'auto'
}

.editorconfig

# 顶层editorconfig文件标识
root = true########## 针对所有文件适用的规则 ##########
[*]
# 编码格式
charset = utf-8
# 缩进符使用的风格 （tab ｜ space）
indent_style = space
# 缩进大小
indent_size = 2
# 控制换行类型(lf | cr | crlf)
end_of_line = lf
# 文件最后添加空行
insert_final_newline = true
# 行开始是不是清除空格
trim_trailing_whitespace = true############# 针对md的规则 ###############
[*.md]
trim_trailing_whitespace = false

配置package.json文件

"scripts": {"dev": "vite --host","build": "vite build","preview": "vite preview","lint": "oxlint && eslint", "lint:fix": "oxlint --fix && eslint --fix"
},

此时终端中执行 pnpm lint 或者 pnpm lint:fix 就会检测并修复代码 🤩

检测结果以 oxlint形式展现⬇️

接入 husky + lint-staged（可选）

安装依赖

pnpm i husky lint-staged -D

执行 pnpm exec husky init 并且在 package.json的 scripts里面增加 "prepare": "husky init",（其他人安装后会自动执行） 根目录会生成 .hushy 文件夹。

直接插入以下代码⬇️（没有对应文件的自行创建）

lint-staged.config.js

export default {'**/*.{html,vue,ts,cjs,json,md}': ['prettier --write'],'**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx,vue,astro,svelte}': ['oxlint --fix && eslint --fix']
}

通过下面命令在钩子文件中添加内容⬇️

echo "npx --no-install -- lint-staged" > .husky/pre-commit
echo "npx --no-install commitlint --edit $1" > .husky/commit-msg

注意⚠️⚠️⚠️ ：
上面命令钩子不会执行 当进行git提交时会出现下面问题⬇️

说是无法执行这个二进制文件 ，解决方案如下⬇️
在vscode编辑器底部操作栏 会显示当前文件编码格式 默认为➡️
点击后选择
然后再次执行git提交命令就可以了🤙

接入commitizen + commitlint + cz-git（可选）

安装依赖

pnpm i commitizen commitlint @commitlint/cli @commitlint/config-conventional cz-git -D

commitizen 基于Node.js的 git commit 命令行工具，辅助生成标准化规范化的 commit message

committlint 检查你的提交消息是否符合常规的提交格式。

cz-git 标准输出格式的 commitizen 适配器

直接插入以下代码⬇️（没有对应文件的自行创建）

commitlint.config.js

/** @type { import('cz-git').UserConfig } */
export default {extends: ['@commitlint/config-conventional'],rules: {'type-enum': [2,'always',['feat','fix','perf','style','docs','test','refactor','build','ci','init','chore','revert','wip','workflow','types','release']],'subject-case': [0]},prompt: {alias: { fd: 'docs: fix typos' },messages: {type: '选择你要提交的类型 :',scope: '选择一个提交范围（可选）:',customScope: '请输入自定义的提交范围 :',subject: '填写简短精炼的变更描述 :\n',body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',footerPrefixesSelect: '选择关联issue前缀（可选）:',customFooterPrefix: '输入自定义issue前缀 :',footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',confirmCommit: '是否提交或修改commit ?'},types: [{ value: 'feat', name: 'feat:  🤩 新增功能 | A new feature', emoji: ':sparkles:' },{ value: 'fix', name: 'fix:   🐛 修复缺陷 | A bug fix', emoji: ':bug:' },{ value: 'docs', name: 'docs:  📝 文档更新 | Documentation only changes', emoji: ':memo:' },{value: 'style',name: 'style: 🎨 代码格式 | Changes that do not affect the meaning of the code',emoji: ':lipstick:'},{value: 'refactor',name: 'refactor:  ♻️  代码重构 | A code change that neither fixes a bug nor adds a feature',emoji: ':recycle:'},{value: 'perf',name: 'perf:  ⚡ 性能提升 | A code change that improves performance',emoji: ':zap:'},{value: 'test',name: 'test:  ✅ 测试相关 | Adding missing tests or correcting existing tests',emoji: ':white_check_mark:'},{value: 'build',name: 'build:  📦️ 构建相关 | Changes that affect the build system or external dependencies',emoji: ':package:'},{value: 'ci',name: 'ci:  🎡 持续集成 | Changes to our CI configuration files and scripts',emoji: ':ferris_wheel:'},{ value: 'revert', name: 'revert:  ⏪️ 回退代码 | Revert to a commit', emoji: ':rewind:' },{value: 'chore',name: 'chore:  🔨 其他修改 | Other changes that do not modify src or test files',emoji: ':hammer:'}],useEmoji: true,emojiAlign: 'center',useAI: false,aiNumber: 1,themeColorCode: '',scopes: [],allowCustomScopes: true,allowEmptyScopes: true,customScopesAlign: 'bottom',customScopesAlias: 'custom',emptyScopesAlias: 'empty',upperCaseSubject: false,markBreakingChangeMode: false,allowBreakingChanges: ['feat', 'fix'],breaklineNumber: 100,breaklineChar: '|',skipQuestions: [],issuePrefixes: [// 如果使用 gitee 作为开发管理{ value: 'link', name: 'link:     链接 ISSUES 进行中' },{ value: 'closed', name: 'closed:   标记 ISSUES 已完成' }],customIssuePrefixAlign: 'top',emptyIssuePrefixAlias: 'skip',customIssuePrefixAlias: 'custom',allowCustomIssuePrefix: true,allowEmptyIssuePrefix: true,confirmColorize: true,scopeOverrides: undefined,defaultBody: '',defaultIssues: '',defaultScope: '',defaultSubject: ''}
}

配置package.json文件

"scripts": {"dev": "vite --host","build": "vite build","preview": "vite preview","lint": "oxlint && eslint", "lint:fix": "oxlint --fix && eslint --fix","cz": "git-cz"
},
"config": {"commitizen": {"path": "node_modules/cz-git"}}

测试

在终端命令行中输入⬇️

git add .pnpm cz

然后会出现本次git提交选项

根据需求选择

ctrl + c 终止当前提交
Enter 下一步操作

模板

拉取后 开箱即用 模板地址➡️ https://github.com/gitboyzcf/vue3-vite-template

样例

此模板开发大屏模板样例➡️ https://github.com/gitboyzcf/vue3-simple-screen

敬请期待

后续还会有新功能接入当前模板，敬请期待…

到这里就结束了，后续还会更新 前端 系列相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！

推荐文章👇

Eslint 会被 Oxlint 干掉吗？
uniapp-vue3-vite 搭建小程序、H5 项目模板