Giter VIP home page Giter VIP logo

ts-vue's Introduction

ts-vue

vue element-ui typescript

总览

ts-vue是一个中后台前端解决方案,它基于 vue, typescriptelement-ui实现。

截图

登陆页

登陆页

主页

主页

功能

- 登录 / 注销

- 权限验证
  - 页面权限
  - 权限配置

- 多环境发布
  - Dev / Stage / Prod

- 全局功能
  - 动态换肤
  - 动态侧边栏(支持多级路由嵌套)
  - Svg 图标
  - 全屏
  - 设置
  - Mock 数据 / Mock 服务器

- 组件
  - ECharts 图表

- 表格
  - 复杂表格

- 控制台
- 引导页
- 错误页面
  - 404

前序准备

你需要在本地安装 nodegit。本项目技术栈基于 typescriptvuevuexvue-routervue-cliaxioselement-ui,所有的请求数据都使用faker.js进行模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。

目录结构

|-- ts-vue
    |-- .browserslistrc     # browserslistrc 配置文件 (用于支持 Autoprefixer)
    |-- .env.development    # development环境变量配置
    |-- .env.production     # production环境变量配置
    |-- .env.test           # test环境变量配置
    |-- .eslintrc.js        # eslint 配置
    |-- .gitignore
    |-- babel.config.js     # babel-loader 配置
    |-- package-lock.json
    |-- package.json        # package.json 依赖
    |-- postcss.config.js   # postcss 配置
    |-- README.md
    |-- tsconfig.json       # typescript 配置
    |-- vue.config.js       # vue-cli 配置
    |-- mock                # mock 服务器 与 模拟数据
    |   |-- mock-server.ts
    |-- public              # 静态资源 (会被直接复制)
    |   |-- favicon.ico     # favicon图标
    |   |-- index.html      # html模板
    |-- src
    |   |-- App.vue         # 入口页面
    |   |-- main.ts         # 入口文件 加载组件 初始化等
    |   |-- peimission.ts   # 权限管理
    |   |-- settings.ts     # 设置文件
    |   |-- shims-tsx.d.ts
    |   |-- shims-vue.d.ts
    |   |-- api             # 所有请求
    |   |-- assets          # 主题 字体等静态资源 (由 webpack 处理加载)
    |   |-- components      # 全局组件
    |   |-- filters         # 全局过滤函数
    |   |-- icons           # svg 图标
    |   |-- layout          # 全局布局
    |   |-- router          # 路由
    |   |-- store           # 全局 vuex store
    |   |-- styles          # 全局样式
    |   |-- utils           # 全局方法
    |   |-- views           # 所有页面
    |-- tests               # 测试

如何设置以及启动项目

安装依赖

npm install

启动本地开发环境(自带热启动)

npm run serve

构建生产环境(自带压缩)

npm run build

执行测试

npm run test

lint 检测

npm run lint

单元测试

npm run test:unit

自动生成 svg 组件

npm run svg

自定义 Vue 配置

请看 Configuration Reference.

ts-vue's People

Contributors

cosen95 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.