网站一般多少钱一年,做创意ppt网站有哪些方面,门户网是什么,惠州企业建站程序npm地址
install
npm install zzy-project-cli -g做什么#xff1f;
将多个可选的框架提供给使用者选择#xff0c;选中后自动下载对应模板#xff0c;快捷使用。
使用
step1
zzy-cli create [项目名称]step2
获取模板之后选取任一进行下载 下载完成之后即可使用
模…npm地址
install
npm install zzy-project-cli -g做什么
将多个可选的框架提供给使用者选择选中后自动下载对应模板快捷使用。
使用
step1
zzy-cli create [项目名称]step2
获取模板之后选取任一进行下载 下载完成之后即可使用
模板介绍
模板组是由新旧多个不同的框架集合成的vite类为最新开发产出的框架webpack为去年及更早开发产出。vite由vuereact分别对应PC管理端Mobile业务页面总计四个模板可以使用且全部为ts开发。webpack模板三种分别是vue-self-admin简单二次修改后的vue-element-admin框架vue版本为2xreact_mobile为js一代产出的框架css为lessv2是ts开发css为styled-components。vite的模板全部都是精装react系列有骨架屏错误报告等等vue有权限验证icon组件等预装内容webpack相对比较简陋一些。webpack的框架作为上一代内容不再维护vite长期维护。以下为各个框架的readme.md 内容
vite_react_management
技术栈
Vite4Reactreact-router6antd-mobile5reduximmutablestyled-componentseslintprettier
点
默认具备骨架屏加载(src/componrnts/LoadSkeleton)、错误边界(只限于在core之内之外额外在baseRoute中设置)(src/componrnts/ErrorBoundary)、404(src/views/404)全局已配置的规则默认开发软件为VSCode(已设置配置文件)store内的复杂数据一律保证immutable化配合immutable处理基本全局配置在config中的env分别设置mobile下core可以什么都不做只是一个包裹具体是在其下面做处理默认配置src路径别名为
rules
style组件默认后缀为 Sty example home组件的顶级style组件就是
ContainerStyContainerSty/请求文件统一从api中以views相同的结构进行创建使用是以
import * as api from /api/homeapi.testApi({// ...datas
}).then(console.log)项目内默认以驼峰形式开发普通页面的路由存放至 src/router/asyncRoutes使用redux存放内容时规则如下
const Test (props) {// 对于不同入口进行区分const { testObj } propsconst { setTestObjDispatch } propsconst { ...otherProps } props
}const mapStateToProps (state) ({testObj: state.getIn([core, testObj]).toJs()
})const mapDispatchToProps (dispatch) ({// dispatch方法都要添加后缀进行分辨setTestObjDispatch(key) {dispatch(setTestObjDis(key))}
})// eslint
const RTest connect(mapStateToProps, mapDispatchToProps)(Test)
export RTest全局样式在src/style.ts下公共样式在src/utils/global-style.ts下
vite_react_mobile
技术栈
Vite4Reactreact-router6antd-mobile5reduximmutablestyled-componentseslintprettier
点
默认具备骨架屏加载(src/componrnts/LoadSkeleton)、错误边界(只限于在core之内之外额外在baseRoute中设置)(src/componrnts/ErrorBoundary)、404(src/views/404)全局已配置的规则默认开发软件为VSCode(已设置配置文件)store内的复杂数据一律保证immutable化配合immutable处理基本全局配置在config中的env分别设置mobile下core可以什么都不做只是一个包裹具体是在其下面做处理默认配置src路径别名为 默认配置对应的UI框架 icons 插件
rules
style组件默认后缀为 Sty example home组件的顶级style组件就是
ContainerStyContainerSty/请求文件统一从api中以views相同的结构进行创建使用是以
import * as api from /api/homeapi.testApi({// ...datas
}).then(console.log)项目内默认以驼峰形式开发普通页面的路由存放至 src/router/asyncRoutes使用redux存放内容时规则如下
const Test (props) {// 对于不同入口进行区分const { testObj } propsconst { setTestObjDispatch } propsconst { ...otherProps } props
}const mapStateToProps (state) ({testObj: state.getIn([core, testObj]).toJs()
})const mapDispatchToProps (dispatch) ({// dispatch方法都要添加后缀进行分辨setTestObjDispatch(key) {dispatch(setTestObjDis(key))}
})// eslint
const RTest connect(mapStateToProps, mapDispatchToProps)(Test)
export RTest全局样式在src/style.ts下公共样式在src/utils/global-style.ts下
vite_vue_management
技术栈
Vite4Vue3vue-router4element-plus2piniascsseslintprettier
点
默认具备KeepAlive、404(src/views/errorPage/404、权限指令后期根据实际情况更改)、SideBar、Breadcrumb、Tags路由守卫已经预配置和登录互相挂钩PC端默认开启路由权限校验在修改config/.env.development.production 中的 VITE_OPEN_PERMISSION 进行修改全局已配置的规则默认开发软件为VSCode(已设置配置文件)基本全局配置在config中的env分别设置默认配置src路径别名为 element-plus组件设置自动导入直接使用即可无需引入默认配置对应的UI框架 icons 插件svg-icon组件内可直接使用 src/assets/icons 下的svg
rules
每个页面顶层默认id为 [Page]_Page_Container
div idLogin_Page_Container
/div每个组件顶层默认class为 [Component]_Component_Container
div idTable_Component_Container
/div请求文件统一从api中以views相同的结构进行创建使用是以
import * as api from /api/homeapi.testApi({// ...datas
}).then(console.log)项目内默认以驼峰形式开发普通页面的路由存放至 src/router/asyncRoutes全局样式在src/style.scss下svg图标存放至src/assets/icons中配合 svg-icon组件使用存储一般通过src/utils/storage.ts内提供的方法调用
vite_vue_mobile
技术栈
Vite4Vue3vue-router4vant4piniascsseslintprettier
点
默认具备KeepAlive、404(src/views/errorPage/404、权限指令后期还需要根据实际情况更改)、全局组件 TitleBar/svg-icon路由守卫已经预配置和登录互相挂钩移动端默认不开启路由权限校验在修改config/.env.development.production 中的 VITE_OPEN_PERMISSION 进行修改全局已配置的规则默认开发软件为VSCode(已设置配置文件)基本全局配置在config中的env分别设置默认配置src路径别名为 vant组件设置自动导入直接使用即可无需引入默认配置对应的UI框架 icons 插件svg-icon组件内可直接使用 src/assets/icons 下的svg
rules
每个页面顶层默认id为 [Page]_Page_Container
div idLogin_Page_Container
/div每个组件顶层默认class为 [Component]_Component_Container
div idTable_Component_Container
/div请求文件统一从api中以views相同的结构进行创建使用是以
import * as api from /api/homeapi.testApi({// ...datas
}).then(console.log)项目内默认以驼峰形式开发普通页面的路由存放至 src/router/asyncRoutes全局样式在src/style.scss下svg图标存放至src/assets/icons中配合 svg-icon组件使用存储一般通过src/utils/storage.ts内提供的方法调用
webpack5_V2
基于react webpack为主的移动端项目基础框架。
本项目设置了 DllPlugin(react、react-dom)在public中已经打包了一份如果更改webpack的Dllplugin配置需先 yarn dll 重新进行编译而后再 yarn build
技术栈react,react-router/-dom,webpack5,react-redux,immutable,axios,styled-components,antd
亮点
极速打包尽我所能的缩小首屏加载时常(prod)全自动的动态链接库不同环境不同配置的webpack更快的配置路由多环境多域名处理在保证包大小的情况下进行浏览器兼容处理n个webpack小优化集成antd并设置按需加载集成zzy-javascript-devtools(手动狗头)控制台更干净友善的提示运行打包改用 node API 写法执行 更高的操作上限eslint校验新增
webpack5-react-mobile以及vue-self-admin 不做阐述前者和上面的v2基本一致只是没有ts和css区别后者只是摘除一些多余内容。
webpack5-react-mobile github地址
vue-self-admin github
