锐客网

  1. 首页 > it技术 > >

使用webpack5，vue3搭建项目

vue.jswebpac


稳定地enalpro 创建 Web 应用








特性

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

  • 组件自动化加载
  • 使用 Pinia 的状态管理
  • UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
  • 各种图标集为你所用
  • I18n 国际化开箱即用
  • 使用 新的 语法
  • 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 地 SFC 语法
  • ESLint 配置为 @antfu/eslint-config, 单引号, 无分号.
开发工具
  • TypeScript
  • Cypress - E2E 测试
  • pnpm - 快, 节省磁盘空间的包管理器
  • Netlify - 零配置的部署
  • VS Code 扩展
    • Volar - Vue 3 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 文件夹被生成。
相关仓库 【使用webpack5，vue3搭建项目】

    推荐阅读


    上一篇：实验配置cisco单臂路由

    下一篇：【Python】退出循环的两种不同方式（break和continue）