Vue.js2.0+ElementUI后台系统开发教程：环境搭建与目录构建

"这篇教程介绍了如何使用vue.js 2.0和ElementUI来开发后台管理系统。首先，按照官方指南设置项目框架，通过安装Vue、Vue CLI以及初始化Webpack模板创建项目。接着，安装依赖并启动项目，确认环境搭建成功。然后，规划项目目录，包括存放视图页面的`src/page`目录，以及各个功能模块的子目录。接下来，搭建首页，引入并使用ElementUI库，以实现顶部导航栏、左侧导航栏和中间内容区的布局。最后，举例展示了如何在`app.vue`中引入和使用ElementUI组件。" 在本文档中，我们学习了以下几个重要的Vue.js和前端开发的知识点： 1. **Vue.js项目初始化**： - 使用`vue-cli`工具创建基于Webpack的项目模板，通过命令`vue init webpack my-project`快速构建项目。 - 安装Vue.js的特定版本，例如`cnpm install vue@2.1.6`。 - 安装项目依赖包，如`cnpm install`，并使用`cnpm run dev`启动开发服务器。 2. **项目结构设计**： - 规划`src/page`目录来组织视图页面，根据功能细分如`activeManage`（活动管理）和`activePublic`（活动发布）等子目录。 3. **ElementUI的集成**： - 安装ElementUI库，如`cnpm i element-ui@1.0.9`，以便利用其丰富的UI组件。 - 固定Vue和ElementUI版本以避免升级导致的兼容性问题。 - 在`app.vue`中全局引入ElementUI，`import Element from 'element-ui'; import 'element-ui/lib/theme-default/index.css'; Vue.use(Element)`。 4. **使用ElementUI组件**： - 创建基本的页面布局，例如使用`el-menu`、`el-col`和`el-row`等组件构造顶部导航和侧边栏导航。 - `el-menu-item`用于创建导航菜单项，`@select`监听选中事件。 这个教程适合初学者，它逐步指导如何建立一个基础的后台管理系统，并演示了Vue.js与ElementUI的结合使用，为后续的页面开发和功能实现打下基础。后续部分可能涵盖路由配置、组件化开发、状态管理（如Vuex）以及API接口的调用等内容。