乐趣区

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

jiezi

<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 文件夹被生成。

相干仓库

<!– ## 后盾整合示例

退出移动版