一套基于vue.js element-ui的网站管理系统框架

源码地址 问题反馈

# 进入项目根目录
cd **

# 安装依赖文件
npm install

# 启动本地开发环境
npm run start

# 发布开发环境
npm run dev

# 发布测试环境
npm run test

# 发布生产环境
npm run pro

# 使用mock数据发布
npm run mock

vue

vue-router

vue-resource

webpack

element-ui

store.js

underscore.js

mock.js

.
├── README.md                // 说明文件
├── dist                     // 项目发布输出目录
├── config                   // 项目环境配置目录
├── static                   // 静态资源目录
│   └── mock                 // mock文件目录
│       ├── config.js        // mock配置文件
│       └── init.js          // mock入口文件
├── build                    // 发布构建配置
│   ├── build.js             // 构建发布项目入口文件
│   ├── dev-server.js        // 开发的服务配置
│   ├── webpack-dev-conf.js  // 开发的Webpack 配置文件
│   ├── webpack-prod-conf.js // 生产的Webpack 配置文件
│   ├── webpack-base-conf.js // 基本的Webpack 配置文件
├── package.json             // 项目依赖配置文件
├── src                      // 项目源码目录
│   ├── assets               // css js 和图片资源
│   ├── components           // 各种组件
│   ├── views                // 各种页面
│   ├── service              // 各种服务
│   │   ├── ajax.js          // ajax请求封装
│   │   ├── config.js        // 项目配置
│   │   ├── filters.js       // 过滤器
│   │   ├── interceptor.js   // 拦截器
│   │   ├── router.js        // 路由配置
│   │   └── util.js          // 基础工具
│   ├── App.vue              // 根组件
│   └── main.js              // Webpack 预编译入口         
├── index.html               // 项目入口文件
.

// ...

• 对Vue.http封装，实现数据过滤
• 引入mock，在本地环境和mock环境时使用，在main.js中设置mock: true开启。

• 配置化Menu组件
• 优化webpack配置，支持local develop test production环境打包

• 解决单页刷新问题，地址使用#访问。注：在某些授权路径中部能使用#（如：微信支付）

• 优化环境配置文件，添加环境变量test
• 支持npm run dev本地开发环境，npm run test发布测试环境，npm run pro发布生产环境

• 实现面包屑导航功能
• 实现基础请求拦截器

• 使用element-ui的element-variables.css文件构建主题样式
• 构建管理系统基础页面框架

• 优化路由，配合webpack实现路由懒加载
• 引入element-ui，并实现懒加载

• 框架搭建