vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）

不念不忘少年蓝@ 2022-07-10 11:26 211阅读 0赞

转载自：http://www.jianshu.com/p/d87d7140944e

### 导语 ###

> 本次将会从头到尾详解，怎样使用vue和ElementUI快速开发后台管理系统，以及在开发过程中遇到的一些bug
> 
>  *  [在线demo][demo]
>  *  [源码][Link 1]
> 
> 如果运行时报错，请检查几个包的版本
> 
>  *  node.js 6.9.2
>  *  cnpm 3.10.10
>  *  vue 2.1.6
>  *  element-ui 1.0.9

### 项目结构分析 ###

>  *  活动发布
>     
>      *  步骤一
>      *  步骤二
>      *  步骤三
>      *  步骤四
>  *  活动管理
>     
>      *  列表页
>         
>          *  活动详情页
>             
>              *  活动详情
>                 
>                  *  步骤一
>                  *  步骤二
>                  *  步骤三
>                  *  步骤四
>              *  报名管理
>              *  签到
>              *  数据统计
>              *  评价管理

### 开发前准备 ###

> 开发前，请先熟悉下面的4个文档
> 
>  *  [vue.js2.0中文][vue.js2.0],项目所使用的js框架
>  *  [vue-router][],vue.js配套路由
>  *  [vuex][]，状态管理
>  *  [Element][]，UI框架

### 正式开始 ###

> ##### 1. 根据[官方][Link 2]指引，构建项目框架 #####

# 安装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. 运行项目之后，会看到以下界面，恭喜你，项目环境搭建成功 #####

![1240][]

normal.png

> ##### 3. 根据[项目结构][Link 3],构建项目目录 #####

![1240 1][]

menu.png

*  src/page/ -------------存放视图页面的目录
    
     *  activeManage/ --------------------活动管理
        
         *  index.vue ------------------------活动管理列表页
         *  detail.vue ------------------------活动管理详情页
         *  page1/2/3/4/5 -------------------分别对应：活动管理/报名管理/签到/数据统计/评价管理
     *  activePublic/ -----------------------活动发布
        
         *  index.vue -----------------------活动发布首页
         *  step1/2/3/4 --------------------分别对应：步骤一/二/三/四

> #### 4. 搭建项目的首页 ####
> 
> 项目首页由顶部导航栏，左侧导航栏，中间内容区构成，如图

![1240 2][]

后台管理系统封面.png

> #### 4.1 安装element-ui ####
> 
>     $ cnpm i element-ui@1.0.9
> 
> 建议固定vue和element-ui的版本，避免将来版本升级后产生冲突
> 
> #### 4.2 引入element-ui ####
> 
> 在app.vue引入element-ui，然后就可以在其他任何页面中使用了

import Element from 'element-ui'
        import 'element-ui/lib/theme-default/index.css'
        Vue.use(Element)

> #### 4.3 使用element-ui ####

将app.vue改为以下内容

<template>
          <div id="app">
            
            <header class="header">
            <el-row>
                <el-col :span="24">
                  <el-menu default-active="5" class="el-menu-demo" mode="horizontal" @select="">
                    <el-menu-item index="1">高级插件</el-menu-item>
                    <el-menu-item index="2">在线商城</el-menu-item>
                    <el-menu-item index="3">客户管理</el-menu-item>
                    <el-menu-item index="4">系统设置</el-menu-item>
                    <el-menu-item index="5">活动发布</el-menu-item>
                  </el-menu>
                </el-col>
            </el-row>
            </header>
            <div style="position: relative;height: 60px;width: 100%;"></div>
    
            <main>
                  
                <div class="main-left">
                  <el-menu default-active="/activePublic" class="el-menu-vertical-demo" :router="true">
                    <el-menu-item index="/activePublic" :class="{'isActive': active}">活动发布</el-menu-item>
                    <el-menu-item index="/activeManage" :class="{'isActive': !active}">活动管理</el-menu-item>
                  </el-menu>
                </div>
    
                  
                  <div class="main-right" >
    
                  </div>
            </main>
          </div>
        </template>
    
        <script> import Vue from 'vue' import Element from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(Element) export default { name: 'app', data: function (){ return { active:true } } } </script>
    
        <style> body{ margin: 0;} #app { min-width: 1200px; margin: 0 auto; font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif; } /* 头部导航 */ header{ z-index: 1000;min-width: 1200px;transition: all 0.5s ease; border-top: solid 4px #3091F2; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04); } header.header-fixed{ position: fixed;top: 0;left: 0;right: 0;} header .el-menu-demo{ padding-left: 300px!important;} /* 主内容区 */ main{ display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 800px; border: solid 40px #E9ECF1; background-color: #FCFCFC; } main .main-left{ text-align: center;width: 200px;float: left;} main .main-right{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color: #fff; padding: 50px 70px; } main .el-menu{ background-color: transparent!important;} </style>

> #### 4.4 预览项目,看到如图所示页面，项目的首页就搭建好了 ####

$ cnpm run dev

![1240 3][]

首页.png

学习前端的过程中，我整理了很多资料，也希望能共享出来帮助到更多刚接触或者接触前端不久的同学。不过也为了把控微信群的质量，入群的一定要是前端的小伙伴才可以。入群我就会把资料发给每个人，每天也会挑选前沿的前端高质量文章发到群里给大家学习。想加入的同学可以加 **笑笑微信：iamaixiaoxiao**，拉你入群。再次强调，保证群高质量，群非前端不加，请谅解哦。扫描微信二维码也可以。

![Center][]

[demo]: http://dahouge.oschina.io/houtai/dist/#/activePublic
[Link 1]: https://git.oschina.net/dahouge/houtai
[vue.js2.0]: https://vuefe.cn/
[vue-router]: http://router.vuejs.org/zh-cn/index.html
[vuex]: http://vuex.vuejs.org/en/intro.html
[Element]: http://element.eleme.io/#/zh-CN
[Link 2]: https://vuefe.cn/v2/guide/installation.html
[1240]: /images/20220709/d9780c2d3b4e46c2827236c549135543.png
[Link 3]: http://www.jianshu.com/p/d87d7140944e#content%20
[1240 1]: /images/20220709/b3387e59b96c4454bde6c66b3bffd809.png
[1240 2]: /images/20220709/3ffbdce283574691a27675241b19b4cf.png
[1240 3]: /images/20220709/aa9c418b8a584008beb34bb6163df95f.png
[Center]: /images/20220709/7688c44e9c844fdb8167e4363497c4ff.png