前端脚手架神器—x-build

本文最后更新于：1 年前

x-build是一款协助你快速从”零”搭建大型应用的前端脚手架。X-BUILD 基于 vue3 + typescript，使用 vite 构建项目，支持众多的开箱即用的功能和针对项目进行了不同程度的优化，初始模板打包后体积仅为 150kb / 50kb(gzip)。它的宗旨是快速创建一套纯净却具备强大基础功能的模板，协助开发者自由发挥快速搭建任何类型的项目。

基础

在使用此脚手架前，请确保你对以下的技术有足够的知识储备：

文档

文档地址

如何使用？

CLI

你可以通过全局安装 X-BUILD，它本质上是一款 CLI (command-line interface，中文：命令行界面) ，提供了一系列的选项，为你生成一套适合于你的前端开发模板，这套模板已经提供了许多通用的基础功能，为你的项目打下坚实的基础。

基于 X-BUILD 打造自己的脚手架

通常情况下，每个团队的习惯不同，尽管 X-BUILD 提供了可选项辅助生成个性化模板，但不能满足所有人的需求，所以基于 X-BUILD 打造一套自己的脚手架是一个更好的选择，你可以通过 Fork 本仓库，修改成你的团队的开发习惯。

并且你可以私人订制拓展功能，为你的团队创建更多通用的业务组件或工具。

核心功能

脚手架可以快速帮你创建一份空白模板，提供了许多通用的功能：

应用

  • 基于文件的路由
  • 提供环境变量：开发环境、预生产环境、生产环境
  • 基于 Pinia 实现的全局状态管理，更好的支持 TS
  • 提供一个基于 mitt 的组件联动交互的解决方案
  • 提供实用 Hooks，更多情况下推荐使用 vueuse
  • 基于 axios 异步请求封装
  • 基于环境变量的静态资源组件
  • 自动加载 SVG 的图标组件，雪碧图打包
  • 页面登录访问权限、指令权限
  • 页面缓存（基于 keep-alive 实现）
  • 支持 gzip
  • 支持 PWA

    UI

  • 布局系统
  • 可选 Less 或 Sass/Scss 预处理器
  • 根据路由与环境变量自动变化标签栏 Title
  • 静态资源加载页面
  • 页面载入进度条

    规范

  • ESLint Airbnb 规范
  • Stylelint
  • husky & Commitlint

    浏览器支持

    推荐使用Chrome浏览器，不支持 Chrome 80 以下版本，不支持IE。

    快速上手

    本节将介绍如何在全局环境安装 X-BUILD 和通过命令行快速的生成项目。

    环境搭建

  • 需要在本地安装 Node.js 和 Git。
  • 推荐使用 vscode 作为代码编辑器，安装以下插件可以更好的体验脚手架：
    • Vue Language Features (Volar)（Vue3 开发必备）
    • ESLint（Javascript 代码检查）
    • Stylelint（CSS 代码检查）
    • Prettier - Code formatter（代码格式化）
    • Tailwind CSS IntelliSense（Tailwind 提示插件）

安装 cli

推荐全局安装

npm

1
npm install -g x-build

yarn

1
yarn global add x-build

mac、linux 用户需要权限增加 sudo。
使用方式类似于 @vue/cli，提供了终端里的 x-build 或 x（简写）命令。

创建项目

命令

1
x-build create <project-name>

缩写

1
x create <project-name>

选择特性

使用创建命令会提示一系列问题，需要你根据实际需求做出选择：

选择默认 CSS 预处理器

  • 如果你使用的是 Less，可以选择 less；
  • 如果你使用的是 Sass，可以选择 sass；

    选择默认组件库

  • Element Plus
  • Ant Design Vue
  • Naive UI
  • Vant

    安装依赖

  • 输入命令后，模板文件会自动创建名字为[name] 的文件夹，并将模板文件复制到此文件夹内。
  • 自动初始化 Git。
  • 依赖会自动安装，会跟你你所安装的包管理工具按优先级选择：

优先级：yarn > npm

提示

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行，可使用 yarn 替代 npm。

开发环境

根据安装后的相关提示，输入相关命令以继续：

运行

1
npm run dev

包分析工具

1
npm run analyze

ESLint

1
npm run lint

StyleLint

1
npm run stylelint