关于vue.js:使用webpack5vue3搭建项目

<p align=’center’>
稳固地 ^enalpro 创立 Web 利用

</p>

个性

• 🪐 Vue 3, wepack@5, pnpm, 减小 node_modules 体积

<!– – 🗂 基于文件的路由 –>

• 📦 组件自动化加载
• 🍍 应用 Pinia 的状态治理
• 🎨 UnoCSS – 高性能且极具灵活性的即时原子化 CSS 引擎
• 😃 各种图标集为你所用
• 🌍 I18n 国际化开箱即用
• 🔥 应用 新的 <script setup> 语法
• 📥 API 主动加载 – 间接应用 Composition API 无需引入
• 🦔 能够自行引入 critters 的生成要害 CSS
• 🦾 TypeScript, 当然
• ☁️ 零配置部署 Netlify

预配置

UI 框架

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

Icons

• Iconify – 应用任意的图标集，浏览：🔍Icônes
• UnoCSS 的纯 CSS 图标计划

插件

• Vue Router
• Pinia – 间接的, 类型平安的, 应用 Composition api 的轻便灵便的 Vue 状态治理
• Vue I18n – 国际化

编码格调

• 应用 Composition API 地 <script setup> SFC 语法
• ESLint 配置为 @antfu/eslint-config, 单引号, 无分号.

开发工具

• TypeScript
• Cypress – E2E 测试
• pnpm – 快, 节俭磁盘空间的包管理器
• Netlify – 零配置的部署

• VS Code 扩大

  • Volar – Vue 3 <script setup> IDE 反对
  • Iconify IntelliSense – 图标内联显示和主动补全
  • i18n Ally – 多合一的 I18n 反对
  • ESLint

Git 提交标准

• 参考 vue 标准 (Angular)

  • feat 减少新性能
  • fix 修复问题 /BUG
  • style 代码格调相干无影响运行后果的
  • perf 优化 / 性能晋升
  • refactor 重构
  • revert 撤销批改
  • test 测试相干
  • docs 文档 / 正文
  • chore 依赖更新 / 脚手架配置批改等
  • workflow 工作流改良
  • ci 继续集成
  • types 类型定义文件更改
  • wip 开发中

当然，十分举荐大家应用 vite

因为这个模板的业务场景十分的局限，上面提供了一个精心策划的列表，列出了社区保护的具备不同偏好和功能集的衍生我的项目。也能够看看他们。当然也欢送你 PR 提供本人的我的项目！

vite – Awesome Vite.js

A curated list of awesome things related to Vite.js

当初能够试试!

enalpro 须要 Node 版本 >=14

克隆到本地

如果您更喜爱应用更洁净的 git 历史记录手动执行此操作

npx degit rwerplus/enalpro my-app
cd my-app
pnpm i # 如果你没装过 pnpm, 能够先运行: npm install -g pnpm

清单

应用此模板时，请尝试依照清单正确更新您本人的信息

• 在 LICENSE 中扭转作者名
• 在 App.vue 中扭转题目
• 在 vue.config.ts 更改主机名
• 在 public 目录下扭转 favicon
• 移除 .github 文件夹中蕴含赞助的信息
• 整顿 README 并删除路由

紧接着, 享受吧 :)

应用

开发

只须要执行以下命令就能够在 http://localhost:3333 中看到

pnpm dev

构建

构建该利用只须要执行以下命令

pnpm build

而后你会看到用于公布的 dist 文件夹被生成。

相干仓库

<!– ## 后盾整合示例