Vue + Element UI快速入门

发表于 | 分类 |
| 全文总计: 字
零基础入门 vue + element-ui

项目源码：https://github.com/woodwhales/woodwhales-study/tree/master/woodwhales-vue-demo

脚手架搭建

步骤1：全局安装 vue 2.0

1
cnpm install vue-cli -g

查看 vue 版本命令：vue -V

步骤2：在一个空目录中创建工程

执行 vue 初始化工程命令：

1
vue init webpack my-demo

  • 当提示到是否安装：Install vue-router?，输入y。

  • 提示是否安装：Use ESLint to lint your code?，输入n。

  • 其他选项全部输入y

安装完成，提示如下信息：

1
2
3
4
5
6
7
8
9
# Project initialization finished!
# ========================

To get started:

  cd my-demo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

根据安装完成的提示，进入 my-demo 目录，执行npm run dev命令，浏览器访问：http://localhost:8080 地址即可看到vue-cli脚手架搭建的基础工程。

步骤3（可选）：修改启动端口号

在config/index.js配置文件中，配置了项目的启动基础参数：

1
2
3
host # 项目启动的主机名
port # 项目启动的端口号
autoOpenBrowser #是否启动时自动打开浏览器并访问

创建自定义组件

在components文件目录下创建Index.vue文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>

export default {
  name: 'Index',
  data () {
    return {
      msg: 'this index page'
    }
  }
}
</script>

<style>

</style>

在router/index.js文件中将Index组件引入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
  ]
})

在App.vue文件中将Index组件引入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div id="app">
    <Index/>
    <!-- <router-view/> -->
  </div>
</template>

<script>
import Index from './components/Index'

export default {
  name: 'App',
  components: {
    Index
  }
}
</script>

具体改动如图：

浏览器访问项目，可以看到首页变成了Index组件中的内容：

引入 element-ui 组件

element-ui 官网：https://element.eleme.cn/#/zh-CN

停止项目，安装element-ui依赖：

1
npm i element-ui -S

安装成功之后，检查package.json配置中是否引入了element-ui：

在main.js配置中引入element-ui组件：

1
2
3
4
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

具体改动如图：

对Index.vue组件进行改造，引入 element-ui 的 Container 布局容器：

Container 布局容器：https://element.eleme.cn/#/zh-CN/component/container

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<template>
  <div>
    <el-container>
      <el-aside width="200px">{{left}}</el-aside>
      <el-container>
        <el-header>{{header}}</el-header>
        <el-main>{{main}}</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'Index',
  data () {
    return {
      left: 'this is left aside',
      header: 'this is header',
      main: 'this is main'
    }
  }
}
</script>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

具体改动如图：

浏览器访问项目，可以看到首页变成了Index组件中的 element-ui 布局样式：

引入 element-ui 导航菜单

NavMenu 导航菜单：https://element.eleme.cn/#/zh-CN/component/menu

在Index.vue组件中的左侧栏中添加导航菜单代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>{{header}}</el-header>
        <el-main>{{main}}</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'Index',
  data () {
    return {
      left: 'this is left aside',
      header: 'this is header',
      main: 'this is main'
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

具体改动如下：

添加导航菜单效果如图：

设置 element-ui 导航菜单动态路由

步骤1：开始导航菜单路由模式

在Index.vue组件中，将菜单<el-menu>标签属性中设置开启使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，并且在<el-main>标签中增加<router-view/>路由组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :default-active="$route.path"
          router>
          <el-menu-item index="/linkMgt">
            <i class="el-icon-s-grid"></i>
            <span slot="title">链接管理</span>
          </el-menu-item>
          <el-menu-item index="/systemConfig">
            <i class="el-icon-s-tools"></i>
            <span slot="title">系统配置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>{{header}}</el-header>
        <el-main><router-view/></el-main>
      </el-container>
    </el-container>
  </div>
</template>

具体改动如下：

步骤2：创建菜单对应的 vue 组件

创建菜单对应的 vue 组件：

SystemConfig.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<h1>系统配置页面</h1>
</template>

<script>
export default {
  name: "SystemConfig"
}
</script>

<style scoped>

</style>

LinkMgt.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<h1>链接管理页面</h1>
</template>

<script>
export default {
  name: "LinkMgt"
}
</script>

<style scoped>

</style>

步骤3：配置路由

在router/index.js配置中将路由与步骤 2 创建的组件关联：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import LinkMgt from "@/components/LinkMgt";
import SystemConfig from "@/components/SystemConfig";

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Index',
      redirect:'LinkMgt',
      component: Index
    },
    {
      path: '/linkMgt',
      name: 'LinkMgt',
      component: LinkMgt
    },
    {
      path: '/systemConfig',
      name: 'SystemConfig',
      component: SystemConfig
    }

  ]
})

注意：

  • 上述配置中对 Router 对象加了mode: 'history'，这样路由地址中就会去除 # 号。
  • 首页路由增加了redirect，访问首页直接重定向到/linkMgt

导航菜单支持动态路由效果如图：

引入 ECharts 组件

ECharts官网：https://echarts.apache.org/zh/index.html

步骤1：安装 ECharts

停止运行中的项目，在项目根据目录安装ECharts依赖：

1
npm install echarts --save

步骤2：将 ECharts 定义到 vue 的原型上

在main.js配置文件中将 ECharts 定义到 vue 的原型上：

1
2
3
import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts;

具体改动如下：

步骤3：在组件中引入 ECharts 图表组件

在LinkMgt.vue组件中引入ECharts图表组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
  <div ref="myEcharts" style="width: 600px;height:400px;"></div>
</template>

<script>
export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myEcharts);
      // 绘制图表
      let option;
      option = {
        title: {
          text: 'ECharts demo'
        },
        xAxis: {
          data: ["Java", "C", "C++", "Python", "Go", "Ruby"]
        },
        yAxis: {},
        series: [{
          name: '熟练度',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>

</style>

引入 Echarts 效果如图：

引入 element-ui 动态表格

步骤1：安装 mock 服务

使用 npm 安装json-server服务：

官网地址：https://github.com/typicode/json-server

1
npm install -g json-server

在一个空目录中创建db.json文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "tableData": {
        "code": "0",
        "msg": "success",
        "data": [{
            "date": "2017-05-22",
            "name": "张三",
            "address": "上海市普陀区"
        }, {
            "date": "2018-11-11",
            "name": "李四",
            "address": "北京市朝阳区"
        }, {
            "date": "2019-10-06",
            "name": "王五",
            "address": "广东省深圳市"
        }]
    }
}

在db.json文件所在目录执行命令，启动 mock 服务：

1
json-server --watch db.json

json-server服务启动成功如图：

浏览器访问http://localhost:3000即可看到`db.json`配置中的 mock 接口：

点击上图中的tableData接口可以看到响应成功的 json 报文：

步骤2：引入axios依赖

停止项目运行，在项目根目录下执行安装命令：

1
npm install axios --save

在main.js配置文件中将 axios 定义到 vue 的原型上：

1
2
3
import axios from 'axios';

Vue.prototype.$axios = axios;

具体改动如下：

步骤3：引入动态表格组件

Table 表格：https://element.eleme.cn/#/zh-CN/component/table

在SystemConfig.vue组件中将动态表格组件引入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "SystemConfig",
  data() {
    return {
      tableData: null
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      this.$axios.get('http://localhost:3000/tableData')
        .then(resp => {
          this.tableData = resp.data.data;
        })
        .catch(error => {
          console.log(error)
        });
    }
  }
}
</script>

<style scoped>
</style>

由于<el-main>包裹表格导致表格的表头异常高，可以在Index.vue中将.el-main样式中的line-height样式删除：

整个页面与浏览器边界有“留白”，可以在App.vue中增加样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-demo</title>
    <style>
      html,
      body,
      #app {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

具体改动如下：

引入动态表格效果如下：

updated updated 2024-01-05 2024-01-05
本文结束感谢阅读

本文标题:Vue + Element UI快速入门

本文作者:

微信公号:木鲸鱼 | woodwhales

原始链接:https://woodwhales.cn/2022/03/31/086/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%