vue 实现网页版前端框架搭建,只需在此基础上增加独立组件,便可很快速开发一个完善的后台管理系统。
登录退出功能
国际化中英文界面切换
动态菜单列表
通过动态页签增减实现组件切换展示
路由切换菜单功能
通过mock + express 实现前后端分离
vue.js 构建用户界面的 MVVM 框架,核心**是:数据驱动、组件系统。
vue-cli 是vue的脚手架工具,目录结构、本地调试、代码部署、热加载、单元测试。
vue-router 是官方提供的路由器,使用vue.js构建单页面应用程序变得轻而易举。
vue-resource 请求数据,服务器通讯。
vuex 是一个专为 vue.js 应用程序开发的状态管理模式,简单来说Vuex就是管理数据的。
Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
Vue-progressbar 进度条组件。
vue-i18n 国际化资源管理组件。
mock mock是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,帮助编写单元测试。
A Vue.js project
# install dependencies
cnpm install
# 启动前端数据接口(前后端分离)at localhost:8082/api/
npm run mock
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
├─ .eslintrc.js
├─ index.html
├─ package.json // 配置文件
├─ README.md // 说明文件
├─ build // webpack打包执行文件
├─ mock // mock前后端分离实现的数据接口
├─ config // webpack打包配置文件
├─ code-standards //编码规范
├─ src │ ├─ main.js // webpack入口/项目启动入口
│ ├─ api // 存放api接口文件,服务层
│ ├─ common // 存放私有系统的公共样式、脚本、图片
│ │ ├─ css
│ │ │ └─ common.css // 公共样式
│ │ ├─ img // 公共图片
│ │ ├─ js
│ │ │ ├─ common.js // 公共脚本
│ │ │ └─ utils.js // 工具类
│ ├─ config
│ │ ├─ index.js // 共有配置文件
│ ├─ router
│ │ ├─ index.js // 存放路由
│ ├─ views // 视图
│ │ ├─ views.md
│ ├─ vuex // 这一块将存放于common项目
│ │ ├─ index.js
│ │ ├─ actions
│ │ ├─ getters
│ │ └─ modules