npm run install
yarn install
yarn dev-?
npm run dev-?
- dev-? 中的“?”为要启动项目的简称,一般为 src/apps 目录下的文件夹名称的每个单词首字母的组合
- 具体命令见 package.json,详情可阅读 build/index.js 的注释
yarn build --app-proj [appName] --app-env [appEnv]
npm run build -- --app-proj [appName] --app-env [appEnv]
- 注意使用npm命令时“--”不能省,否则打包会失败
- appName 为 src/apps 目录下的文件夹名称
- appEnv 为生产环境的部署环境,默认“production”
- 更多信息可阅读 build/index.js 的注释
yarn lint
- mock:模拟数据
- build:编译/打包/资源预加载等相关webpack工程代码
- env.production.plugin.js 生产环境变量插件
- zip.js 生产环境打包后自动压缩打包文件
- webpackConfigs:根据环境生成对应的webpack配置
- 处理 CLI 命令
- public:编译打包静态资源
- src
- apis:API定义
- apps:存放子项目的目录
- assets:静态资源(如图片、视频、第三方库等)
- fonts:内置的字体
- images:全局图片资源
- styles:通用全局样式
- theme.scss 主题样式及颜色定义
- components:通用组件(自定义组件、高阶组件等)
- config:全局配置
- extend:扩展
- mixins:混合
- layouts:布局组件
- router:路由
- store:vuex 全局状态
- utils:工具包(工具函数、高阶函数、混合、注入等辅助型功能)
- antvComponents:ant design vue 常用全局组件按需注册,非常用的组件请在需要用到时按需引入
- cookie:cookie简易封装
- detectZoom:windows系统屏幕缩放调整
- env:环境变量相关方法封装
- message:全局消息相关方法封装
- request:axios简易封装,HTTP请求等相关功能
- store:vuex相关功能封装
- useOss:阿里云OSS相关功能封装
- utilityFunction:全局公用函数
- validators:全局表单验证函数封装
- views:页面及其附属组件
- App.jsx:Vue入口组件
- main.js:项目入口
- 支持JSX,基于vue 2.x
- 为Vue引入优秀的ant design设计
- 同时支持sass、less预编译
- 多端适配,灵活配置布局文件
- mockjs支撑,开发模式下无需后端服务即可调试项目
- 开发模式下自动绕开前端权限验证模块
- mock接口支持传参,并可在控制台打印request和response
- /mock、/src/apis、/src/store下的模块自动引入,无需import
- 所有API自动注入axios,无需import
- 刷新不丢失全局状态
- 刷新不丢失菜单选中状态和打开状态
- 刷新不丢失路由
- 面包屑:动态路由监听,自动生成页面的面包屑,只需在需要的页面引入面包屑组件即可
- 菜单:结合路由及权限验证模块,自动生成菜单,并注入选中状态和打开状态
- 菜单折叠:自动根据路由打开已激活菜单,自动折叠未激活菜单
- 变更浏览器地址:菜单自动导向到新页面,并自动展开到页面所在层级
按需引入ant design vue组件
除了递归遍历,例如this.$children.xxx.$children.$refs[xxx]
的形式,可以借鉴React
的ref
,采用callback
的形式。
结合vue
的provided
和inject
实现。具体例子见 /src/components/TGContainerWithSider 组件与 /src/mixins/forTable 的交互。
cd ~/vue-template-generator/src/apps
mkdir "demo-project"
import forApp from '@/mixins/forApp'
export default {
name: 'DemoProjectApp',
mixins: [forApp]
}
module.exports = {
// 所属项目组名称
appPrefix: 'demo',
// 项目前期一般没有后台服务(接口)的支持,所以可以开启该模式,以模拟数据。
mock: true,
// 项目名称
systemName: '演示项目',
// 默认跳转的页面路由名称(route.name)
defaultRouteName: 'console',
// 以下配置为非必须的,具体见:src/config 注释
header: {
buttons: {
theme: {
availableThemes: [
{ name: '科技蓝', fileName: 'tech-blue' },
{ name: '党政红', fileName: 'party-red' }
]
}
}
},
enableTabPage: true,
hideBreadCrumb: true,
enableLoginVerification: false,
activeSuffixForMenuIcon: '{themeName}-active'
}
module.exports = {
// 开发环境默认本地登录账号
account: 'tgadmin',
// 开发环境默认本地登录密码
password: '123456',
// 前端端口地址
// 是否自动在浏览器中打开系统
open: false,
// 接口代理
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
secure: false
}
}
}
export default {
name: 'Console',
render() {
return (
<div
style={{
lineHeight: '100px',
textAlign: 'center',
fontSize: '1.3rem'
}}
>
控制台
</div>
)
}
}
export default [{
path: 'console',
name: 'console',
component: resolve => require.ensure(
[],
() => resolve(require('@/apps/demo-project/views/Console')),
'chunk-console'
),
meta: {
title: '控制台',
keepAlive: false,
requiresAuth: true,
icon: 'icon-menu-sjkb'
}
}]
进入到工程根目录启动命令行工具,输入以下命令即可:
cd ~/vue-template-generator
vue-cli-service serve --app-proj demo-project
该功能后续会加入到 CLI 命令中自动化生成,届时只需输入一条命令即可创建全新的子项目,敬请期待~~
vue-template-generator 正在向着智能、便捷、快速等方向发展...