vue.js2.0 + ElementUI开发管理类系统（一、构建项目框架）

1. 构建项目框架

    # 安装vue
    $ cnpm install vue@2.1.6
    # 全局安装 vue-cli
    $ cnpm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目my-project
    $ vue init webpack my-project
    # 进入项目目录
    $ cd my-project
    # 安装依赖，走你
    $ cnpm install
    # 运行项目
    $ cnpm run dev

 

2. 运行项目之后，会看到以下界面，恭喜你，项目环境搭建成功

 

3. 根据项目结构,构建项目目录

├── build // webpack配置文件 
├── config // webpack配置文件 
├── dist // 打包文件（放到服务器） 
├── node_modules // 依赖包文件 
├── src // 源码目录 
│   ├── assets // 静态资源 
│   ├── components // 组件 
│   │   ├── FootNav.vue // 底部导航 
│   │   ├── HeadBar.vue // 头部信息栏 
│   │   ├── Home.vue // 首页 
│   │   ├── Layout.vue // 总体布局页 
│   │   ├── Login.vue // 登录页 
│   │   ├── Menu.vue // 侧栏菜单 
│   │   ├── ShortCut.vue // 快捷菜单 
│   │   ├── Welcome.vue // 欢迎页 
│   ├── config // 基本配置 
│   │   ├── env.js // 环境配置 
│   │   ├── localStore.js // 缓存插件 
│   │   ├── LXHR.js // 请求方法 
│   ├── images // 公共图片 
│   ├── mode // 公共数据 
│   │   ├── menuData.js // 菜单数据 
│   │   ├── rulesData.js // 验证数据 
│   │   ├── pages // 项目页面 
│   │   │   ├── common // 公共页面组件 
│   │   │   │   ├── bind.vue // 拼单组件 
│   │   │   │   ├── cost.vue // 费用组件 
│   │   │   │   ├── costSum.vue // 按结算单位汇总组件 
│   │   │   │   ├── deparr.vue // 出发到达组件 
│   │   │   │   ├── flight.vue // 相关航班信息组件 
│   │   │   ├── receive // 收货模块 
│   │   │   │   ├── billing.vue // 开单组件 
│   │   │   │   ├── detail.vue // 开单明细组件 
│   │   │   │   ├── mainPrint.vue // 主单打印组件 
│   │   │   │   ├── receive.vue // 收货组件 
│   │   │   │   ├── search.vue // 查询组件 
│   │   ├── router // 路由 
│   │   │   ├── index.js // 路由配置 
│   │   ├── service // 请求 
│   │   │   ├── index.js // 总体请求 
│   │   ├── store // vuex 
│   │   │   ├── action.js // 异步方法 
│   │   │   ├── index.js // 数据 
│   │   │   ├── action.js // 异步方法 
│   │   │   ├── mutation-types.js // 方法名称 
│   │   │   ├── mutation.js // 方法 
│   │   ├── style // 样式文件 
│   │   │   ├── pages // 页面样式 
│   │   │   │   ├── home.less // 首页样式 
│   │   │   │   ├── layout.less // 布局样式 
│   │   │   │   ├── login.less // 登录样式 
│   │   │   ├── element_reset.less // 覆盖UI组件样式 
│   │   │   ├── icon.less // 引用第三方图标样式 
│   │   │   ├── mixin.less // 工具样式 
│   │   │   ├── reset.css // 重置浏览器样式 
│   │   ├── style // 工具方法文件 
│   │   │   ├── count.js // 精确计算插件 
│   │   │   ├── lodop.js // 打印插件 
│   │   │   ├── time.js // 时间日期处理工具 
│   │   ├── App.vue // 入口组件 
│   │   ├── main.js // 项目入口 
├── static // 公共资源打包文件 
├── .babelrc // babel配置 
├── index.html // 打包后项目入口 
├── package.json // 包管理配置 
.