Skip to content

使用 Ant design + Vue + Typescript + SASS 构建后台管理类型的 Web 应用.

License

Notifications You must be signed in to change notification settings

fatesigner/antd-vue-ts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4039d97 · Oct 6, 2020

History

1 Commit
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020
Oct 6, 2020

Repository files navigation

Ant design + Vue + Typescript

antd logo transparency vue logo transparency ts logo

使用 Ant design + Vue + Typescript + SASS 构建后台管理类型的 Web 应用.

当前支持的版本

download

git clone https://github.com/fatesigner/antd-vue-ts.git

install

npm install

开发模式(Hot Reload)

npm run serve

打包编译,用于生产环境

npm run build

目录结构

├─ build                                      // build 目录,放置打包、编译的脚本
│  ├─ env.js                                  // 定义用于 build 的全局变量,包含当前应用的一些信息
│  ├─ utils.js                                // 工具函数
│  ├─ webpack-html-embed-source-plugin.js     // webpack 插件:将指定的 html、js、css文件内嵌至 index.html
│  ├─ webpack-ignorenotfoundexport-plugin.js  // webpack 插件:忽略关于 "imports was not found in..." 的警告信息
│  ├─ webpack.config.js                       // webpack 配置:包含覆盖 Vue CLI 默认选型的一些配置
│  └─ webpack.loaders.js                      // webpack loders:定义一些 loaders 的默认配置
├─ src
│  ├─ app 
│  │  ├─first-screen                          // 首屏渲染动画模板,将会内嵌至 index.html
│  │  ├─i18n                                  // 国际化(使用 vue-i18n)
│  │  │  ├─ lang                              // 语言包
│  │  │  │  ├─ en-US.ts                       // 英文包
│  │  │  │  └─ zh-CN.ts                       // 中文包
│  │  │  ├─ i18n                              // i18n 核心(初始化i18n配置、并添加一些勾子)
│  │  │  └─ keys                              // 定义 i18n key 接口(用于 typescript 语法检查)
│  │  ├─interfaces                            // 通用接口
│  │  ├─layout                                // 母版页和通用布局(页头、页脚、侧边栏等)
│  │  ├─pipes                                 // 过滤器
│  │  ├─providers                             // 放置一些第三方插件初始化代码和默认配置
│  │  ├─routes
│  │  │  ├─dashboard                          // dashboard(首页)
│  │  │  │  ├─Dashboard.vue                   // dashboard 组件
│  │  │  │  └─ router.ts                      // dashboard 路由
│  │  │  ├─config.ts                          // 定义基础路由(Login或者其他可匿名访问的路由)和业务路由(需授权访问的路由),并将其导出
│  │  │  └─ routes.ts                         // 路由初始化(导入当前目录下其他业务组件,并定义拦截、跳转逻辑)
│  │  ├─services                                             
│  │  │  ├─api.service                        // Api 服务(访问后端接口)
│  │  │  ├─auth.service                       // 授权认证服务(定义授权、认证逻辑)
│  │  │  ├─common.service                     // 通用服务
│  │  │  └─ session.service                   // 用户信息持久化服务(用户信息的本地化存储)
│  │  ├─shared                                // 通用组件
│  │  ├─styles                                // 样式库                                            
│  │  │  └─ reset.scss                        // 样式重置                                           
│  │  ├─theme                                 // 主题库                                
│  │  │  ├─antdv-theme.js                     // 定制 Antd ui 主题                       
│  │  │  └─ default.theme.scss                // 当前应用默认主题
│  │  ├─app.ts                                // 导入 App.vue,并导出 CreateApp 函数
│  │  ├─App.vue                               // App 组件
│  │  ├─event.ts                              // 事件总线(用于组件、服务间通信)
│  │  ├─global.ts                             // 全局变量
│  │  └─ store.ts                             // App store(导入并整合其他组件的 store)
│  ├─ assets                                  // 放置一些静态资源
│  ├─ index.ejs                               // 入口 html 模板(使用 ejs)
│  ├─ lib                                     // 第三方插件、组件库
│  │  ├─antdv-ui                              // antdv-ui(包含部分已二次封装的组件和图标)
│  │  ├─fetch                                 // http 模块(使用 axios)
│  │  ├─qiniu                                 // 七牛云插件
│  │  ├─quick-layout                          // 通用样式库(用于快速布局)
│  │  └─ vue-helper                           // Vue 辅助工具库
│  ├─ main.ts                                 // App 初始化
│  └─ typings                                 // 定义一些用于 Typescipt 的类型文件
│    ├─ vue-shims                             // 支持 Vue 工作于 Typescript 环境
│    ├─ globals.d.ts                          // 拓展 NodeJS.Global 和 NodeJS.Process 类型             
│    └─ window.d.ts                           // 拓展 Window 类型 
├─ test                                       // 测试脚本
│  └─ index.spec.ts                                             
├─ .browserslistrc                            // 配置目标浏览器
├─ .commitlintrc.js                           // 定制代码提交规范
├─ .cz-config.js                              // 定制代码提交类型
├─ .editorconfig                              // 配置编码风格
├─ .env                                       // 环境变量(所有环境均会加载)
├─ .env.development                           // 开发环境变量
├─ .env.production                            // 生产环境变量
├─ .env.test                                  // 测试环境变量
├─ .eslintignore                              // 配置 eslint 可忽略的特定的文件和目录(一般忽略 dist 目录)
├─ .eslintrc.js                               // 配置 eslint
├─ .gitattributes                             // 指定 git 使用的文件和路径的属性
├─ .gitignore                                 // 指定不需要添加到 git 管理的文件和目录
├─ .huskyrc.json                              // 配置 git 勾子(提交前进行 lint 检查或者自动化测试)
├─ .npmignore                                 // 指定 npm publish 时忽略的文件和目录
├─ .npmrc                                     // npm 配置(可禁用 package-lock)
├─ babel.config.js                            // babel 配置
├─ jest.config.js                             // jest 配置
├─ LICENSE                                    // 许可证
├─ lint-staged.config.js                      // 代码风格化配置
├─ package.json                               // 模块描述文件
├─ postcss.config.js                          // postcss 配置
├─ README.md
├─ stylelint.config.js                        // stylelint 配置
├─ tsconfig.json                              // tsconfig 用于项目打包、编译
├─ tsconfig.test.json                         // tsconfig 用于测试脚本
└─ vue.config.js                              // Vue CLI 配置

About

使用 Ant design + Vue + Typescript + SASS 构建后台管理类型的 Web 应用.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published