zzy-project-cli, provides scaffolding for multiple frameworks

npm address

install

npm install zzy-project-cli -g

What to do?

  • Provide multiple optional frameworks for users to choose from, and automatically download the corresponding template after selection for quick use.

Use

step1

zzy-cli create [project name]

step2

After obtaining the template, select any one to download

image.png

It can be used after the download is completed

Template introduction

  • The template group is a collection of old and new frameworks. Vite is the latest framework developed, and webpack is developed last year and earlier.
  • Vite consists of vue and react respectively corresponding to the PC management end and mobile business page. A total of four templates can be used, and all are developed by ts.
  • There are three types of webpack templates, namely vue-self-admin, a simple second modification of the vue-element-admin framework, vue version is 2x, react_mobile is js, a first-generation framework, css is less, and v2 is developed by ts. css is styled-components.
  • Vite’s templates are all hardcover, the react series has skeleton screens, error reports, etc., vue has pre-installed content such as permission verification, icon components, etc., and webpack is relatively simple.
  • The framework of webpack is no longer maintained as the previous generation content, and Vite is maintained for a long time.
  • The following is the readme.md content of each framework

vite_react_management

Technology stack

  • Vite@4
  • React
  • react-router@6
  • antd-mobile@5
  • redux & immutable
  • styled-components
  • eslint &prettier

Point

  • By default, it has skeleton screen loading (src/componrnts/LoadSkeleton), error boundary (limited to within core, otherwise set in baseRoute) (src/componrnts/ErrorBoundary), 404 (src/views/404)
  • Globally configured rules, the default development software is VSCode (configuration file has been set)
  • All complex data in the store must be immutable and processed with immutable
  • The basic global configuration is set separately in env in config
  • Core can do nothing under mobile, it is just a package, specifically processing is done underneath it.
  • The default configuration src path alias is @

rules

  • The default suffix of the style component is Sty example: The top-level style component of the home component is
<ContainerSty><ContainerSty/>
  • Request files are created uniformly from the API with the same structure as views, and are used as follows:
import * as api from '@/api/home'

api.testApi({<!-- -->
// ...datas
}).then(console.log)
  • The project is developed in camel case by default
  • The routes of ordinary pages are stored in src/router/asyncRoutes
  • When using redux to store content, the rules are as follows:
const Test = (props) => {
// Distinguish between different entrances
const { testObj } = props
const { setTestObjDispatch } = props
const { ...otherProps } = props
}

const mapStateToProps = (state) => ({
testObj: state.getIn(['core', 'testObj']).toJs()
})

const mapDispatchToProps = (dispatch) => ({
// Dispatch methods must add suffixes to distinguish them.
setTestObjDispatch(key) {
dispatch(setTestObjDis(key))
}
})

//eslint
const RTest = connect(mapStateToProps, mapDispatchToProps)(Test)
export RTest
  • Global styles are under src/style.ts, and public styles are under src/utils/global-style.ts

vite_react_mobile

Technology stack

  • Vite@4
  • React
  • react-router@6
  • antd-mobile@5
  • redux & immutable
  • styled-components
  • eslint &prettier

Point

  • By default, it has skeleton screen loading (src/componrnts/LoadSkeleton), error boundary (limited to within core, otherwise set in baseRoute) (src/componrnts/ErrorBoundary), 404 (src/views/404)
  • Globally configured rules, the default development software is VSCode (configuration file has been set)
  • All complex data in the store must be immutable and processed with immutable
  • The basic global configuration is set separately in env in config
  • Core can do nothing under mobile, it is just a package, specifically processing is done underneath it.
  • The default configuration src path alias is @
  • The UI framework icons plug-in corresponding to the default configuration

rules

  • The default suffix of the style component is Sty example: The top-level style component of the home component is
<ContainerSty><ContainerSty/>
  • Request files are created uniformly from the API with the same structure as views, and are used as follows:
import * as api from '@/api/home'

api.testApi({<!-- -->
// ...datas
}).then(console.log)
  • The project is developed in camel case by default
  • The routes of ordinary pages are stored in src/router/asyncRoutes
  • When using redux to store content, the rules are as follows:
const Test = (props) => {
// Distinguish between different entrances
const { testObj } = props
const { setTestObjDispatch } = props
const { ...otherProps } = props
}

const mapStateToProps = (state) => ({
testObj: state.getIn(['core', 'testObj']).toJs()
})

const mapDispatchToProps = (dispatch) => ({
// Dispatch methods must add suffixes to distinguish them.
setTestObjDispatch(key) {
dispatch(setTestObjDis(key))
}
})

//eslint
const RTest = connect(mapStateToProps, mapDispatchToProps)(Test)
export RTest
  • Global styles are under src/style.ts, and public styles are under src/utils/global-style.ts

vite_vue_management

Technology stack

  • Vite@4
  • Vue3
  • vue-router@4
  • element-plus@2
  • pinia
  • scss
  • eslint &prettier

Point

  • By default, it has KeepAlive, 404 (src/views/errorPage/404, permission instructions (later changed according to the actual situation)), SideBar, Breadcrumb, Tags
  • Routing guards have been pre-configured and are linked to login.
  • Routing permission verification is turned on by default on the PC side. Modify VITE_OPEN_PERMISSION in config/.env.development & amp;.production.
  • Globally configured rules, the default development software is VSCode (configuration file has been set)
  • The basic global configuration is set separately in env in config
  • The default configuration src path alias is @
  • The element-plus component settings are automatically imported and can be used directly without introduction.
  • The UI framework icons plug-in corresponding to the default configuration
  • The svg under src/assets/icons can be used directly in the svg-icon component.

rules

  • The default id at the top level of each page is [Page]_Page_Container
<div id="Login_Page_Container">
</div>
  • The default class at the top level of each component is [Component]_Component_Container
<div id="Table_Component_Container">
</div>
  • Request files are created uniformly from the API with the same structure as views, and are used as follows:
import * as api from '@/api/home'

api.testApi({<!-- -->
// ...datas
}).then(console.log)
  • The project is developed in camel case by default
  • The routes of ordinary pages are stored in src/router/asyncRoutes
  • Global styles are under src/style.scss
  • The svg icon is stored in src/assets/icons and used with the svg-icon component.
  • Storage is generally called through the methods provided in src/utils/storage.ts

vite_vue_mobile

Technology stack

  • Vite@4
  • Vue3
  • vue-router@4
  • vant@4
  • pinia
  • scss
  • eslint &prettier

Point

  • By default, it has KeepAlive, 404 (src/views/errorPage/404, permission instructions (which need to be changed later according to the actual situation)), and global component TitleBar/svg-icon.
  • Routing guards have been pre-configured and are linked to login.
  • The mobile terminal does not enable routing permission verification by default. Modify VITE_OPEN_PERMISSION in config/.env.development & amp;.production.
  • Globally configured rules, the default development software is VSCode (configuration file has been set)
  • The basic global configuration is set separately in env in config
  • The default configuration src path alias is @
  • The vant component settings are automatically imported and can be used directly without introduction.
  • The UI framework icons plug-in corresponding to the default configuration
  • The svg under src/assets/icons can be used directly in the svg-icon component.

rules

  • The default id at the top level of each page is [Page]_Page_Container
<div id="Login_Page_Container">
</div>
  • The default class at the top level of each component is [Component]_Component_Container
<div id="Table_Component_Container">
</div>
  • Request files are created uniformly from the API with the same structure as views, and are used as follows:
import * as api from '@/api/home'

api.testApi({<!-- -->
// ...datas
}).then(console.log)
  • The project is developed in camel case by default
  • The routes of ordinary pages are stored in src/router/asyncRoutes
  • Global styles are under src/style.scss
  • The svg icon is stored in src/assets/icons and used with the svg-icon component.
  • Storage is generally called through the methods provided in src/utils/storage.ts

webpack5_V2

Basic framework for mobile projects based on react webpack.

This project has set up DllPlugin (react, react-dom), which has been packaged in public. If you change the Dllplugin configuration of webpack, you need to recompile yarn dll first, and then yarn build

Technology stack: react, react-router/-dom, webpack5, react-redux, immutable, axios, styled-components, antd

Highlights

  • Extremely fast packaging
  • Try my best to reduce the loading time of the first screen (prod)
  • Fully automatic dynamic link library
  • Webpack with different configurations in different environments
  • Faster configuration routing
  • Multi-environment and multi-domain name processing
  • Browser compatibility processing while ensuring package size
  • n small webpack optimizations
  • Integrate antd and set up on-demand loading
  • Integrate zzy-javascript-devtools (manual dog head~)
  • Cleaner console, friendly tips
  • Run and package using node API writing method for higher operation limit.
  • eslint check added

webpack5-react-mobile and vue-self-admin will not be elaborated. The former is basically the same as v2 above, except that there is no difference between ts and css. The latter just removes some redundant content.

webpack5-react-mobile github address

vue-self-admin github