概述

用于构建web开发脚手架的cli工具，支持的脚手架类型包括目前主流的 Vue 和 React，同时支持它们的 js 和 ts 版本，可以满足你的任何需要

使用方式:

  1. npm install yy-web-scaffold-cli -g 或 yarn global add yy-web-scaffold-cli
  2. yy-web-scaffold-cli create <your project name>

详述

下面是对工具集中每一个脚手架的具体详细介绍，可以根据自己的需求按需取用~

【js版】Vue2

简介

该项目是基于Webpack4搭建的Vue2脚手架，包含的功能如下:

  1. 热模块更新(HMR)
  2. 支持scss语法
  3. 图片资源的引入
  4. 支持js新版本语法
  5. 支持对打包构建产物的分析
  6. 支持css新语法特性
  7. 集成了 vuex
  8. 集成了 vue-router
  9. 集成 axios
  10. 集成lint-staged、husky、commitlint、eslint、prettier工具链，用于规范代码风格与提高代码质量

使用

  1. yarn dev 开发
  2. yarn build 打包
  3. yarn build:report 打包并查看报告

【ts版】Vue2

简介

该项目是基于Webpack4搭建的Vue2脚手架，包含的功能如下:

  1. 热模块更新(HMR)
  2. 支持scss语法
  3. 图片资源的引入
  4. 支持js新版本语法
  5. 支持对打包构建产物的分析
  6. 支持css新语法特性
  7. 支持 typescript
  8. 集成了 vue-router
  9. 利用 vuex-module-decorators 集成了vuex
  10. 集成 axios
  11. 集成lint-staged、husky、commitlint、eslint、prettier工具链，用于规范代码风格与提高代码质量

使用

  1. yarn dev 开发
  2. yarn build 打包
  3. yarn build:report 打包并查看报告

【js版】Vue3

简介

该项目是基于Webpack5搭建的Vue3脚手架，包含的功能如下:

  1. 热模块更新(HMR)
  2. 支持scss语法
  3. 图片资源的引入
  4. 支持js新版本语法
  5. 支持对打包构建产物的分析
  6. 支持css3新语法
  7. 集成 vue-router4
  8. 集成 vuex4
  9. 集成 axios
  10. 集成lint-staged、husky、commitlint、eslint、prettier工具链，用于规范代码风格与提高代码质量

使用

  1. yarn
  2. yarn dev: 开发
  3. yanr build: 打包

【ts版】Vue3

简介

该项目是基于Webpack5搭建的Vue3脚手架，包含的功能如下:

  1. 热模块更新(HMR)
  2. 支持scss语法
  3. 图片资源的引入
  4. 支持js新版本语法
  5. 支持对打包构建产物的分析
  6. 支持css新语法特性
  7. 支持 typescript
  8. 集成了 vue-router4
  9. 集成了 vuex4
  10. 集成 axios
  11. 集成lint-staged、husky、commitlint、eslint、prettier工具链，用于规范代码风格与提高代码质量

使用

  1. yarn dev 开发
  2. yarn build 打包
  3. yarn build:report 打包并查看报告

【js版】React16

简介

该项目是基于Webpack5搭建的React16脚手架，包含的功能如下:

  1. 热模块更新(HMR)
  2. 支持scss语法
  3. 图片资源的引入
  4. 支持js新版本语法
  5. 支持对打包构建产物的分析
  6. 支持css3新语法
  7. 集成 react-router-dom
  8. 集成 axios
  9. 集成lint-staged、husky、commitlint、eslint、prettier工具链，用于规范代码风格与提高代码质量

使用

  1. yarn
  2. yarn dev: 开发
  3. yanr build: 打包

【ts版】React16

简介

该项目是基于Webpack5搭建的React16脚手架，包含的功能如下:

  1. 热模块更新(HMR)
  2. 支持scss语法
  3. 图片资源的引入
  4. 支持js新版本语法
  5. 支持对打包构建产物的分析
  6. 支持css3新语法
  7. 集成 react-router-dom
  8. 集成 axios
  9. 集成lint-staged、husky、commitlint、eslint、prettier工具链，用于规范代码风格与提高代码质量
  10. 支持 typescript

使用

  1. yarn
  2. yarn dev: 开发
  3. yanr build: 打包

【js版】React17

简介

该项目是基于Webpack5搭建的React17脚手架，包含的功能如下:

  1. 热模块更新(HMR)
  2. 支持scss语法
  3. 图片资源的引入
  4. 支持js新版本语法
  5. 支持对打包构建产物的分析
  6. 支持css3新语法
  7. 集成 react-router-dom
  8. 集成 axios
  9. 集成lint-staged、husky、commitlint、eslint、prettier工具链，用于规范代码风格与提高代码质量

使用

  1. yarn
  2. yarn dev: 开发
  3. yanr build: 打包

【ts版】React17

简介

该项目是基于Webpack5搭建的React17脚手架，包含的功能如下:

  1. 热模块更新(HMR)
  2. 支持scss语法
  3. 图片资源的引入
  4. 支持js新版本语法
  5. 支持对打包构建产物的分析
  6. 支持css3新语法
  7. 集成 react-router-dom
  8. 集成 axios
  9. 集成lint-staged、husky、commitlint、eslint、prettier工具链，用于规范代码风格与提高代码质量
  10. 支持 typescript

使用

  1. yarn
  2. yarn dev: 开发
  3. yanr build: 打包

结语

如果你对该工具有任何建议，那么欢迎提 issue ! ^_^

最后的最后，如果你喜欢这个项目，请给一个 star⭐ 吧！