山东大学项目实训-地图圈系统-web开发（2）-CSDN博客

本文链接：https://blog.csdn.net/qq_44836727/article/details/115337184

山东大学项目实训-地图圈系统-web开发（2）

一、关于element-ui：

关于element-ui，element-Ui是基于vue封装的组件库，简化了常用组件的封装，提高了重用性原则。由于使用Vue开发网页时，需要不断的进行组件的底层处理和组装，而阿里巴巴旗下的饿了吗团队就基于此开发了element-ui组件，简化了常用组件的组装，使得开发者在开发网页时可以较为方便的进行组件间的封装，降低了开发难度。

我们可以去element-ui官网去查找element-ui的指南与其组件使用信息：

1. 设计原则：

element-ui的设计原则
一致性 Consistency
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

2. 组件介绍
在这里插入图片描述
element-ui提供了多种组件，供开发者开发使用。组件类型多种多样，每种组件都配备详细的使用说明以及组件间的逻辑介绍，足够开发者开发出完整且美观的界面。

二、测试element-ui：

打开idea，再打开上次创建的项目map：

在控制台输入 npm run serve，运行该vue项目：
在这里插入图片描述
命令执行完之后，我们便可以点击上方的网址进入Vue的初始网页：

由于要进行element-ui的测试，故需将页面清空。首先进行el-card（卡片，类似一个容器）的测试：

Helloworld.vue：

<template>
  <div>
    <el-card class="card_style">

    </el-card>
  </div>
</template>

<script>

</script>

<style scoped>
  .card_style{
    margin: 100px 30px 10px 30px;
  }
</style>

App.vue：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>

</style>

界面效果：
在这里插入图片描述
卡片的高度会随着内部组件的高度随之变化，可以根据padding来调整边界距离内部组件的距离。

三、页面路由的使用：

要介绍页面路由，首先就要介绍单页面富应用程序（SPA）：

所谓SPA，就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

那么什么是路由呢？由于本次我实现的为前端网页，故只需使用前端路由，即根据不同的路径请求不同的资源，进而显示不同的页面的过程。

要在Vue中实现SPA，就需要使用vue-router实现页面路由。vue-router是vue.js官方提供的一个路由管理器。

Vue Router的特性：
支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

如何使用vue-router来实现页面路由呢？

首先导入vue-router组件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

添加路由填充位（在App.js中）

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

<style>

</style>

引入路由组件（在主目录下创建router目录，里面创建一个index.js页面）

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入HelloWorld.vue页面
import HelloWorld from '../components/HelloWorld.vue'

Vue.use(VueRouter)

配置路由规则并创建路由实例（index.js）

// routes是路由规则数组
const routes = [
    // 每一个路由规则都是一个对象，对象中至少包含path和component两个属性
    // path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
    // redirect属性：重定向属性，即访问path的地址会自动重定向到目标重定向的地址 
    { path: '/', redirect: '/helloWorld' },
    { path: '/helloWorld', component: HelloWorld }
]
// 创建路由实例
const router = new VueRouter({
    routes
})
// export导出，方便在main.js中用import引入
export default router

引入路由规则并挂载到Vue根实例中

// 为了能让路由规则生效，必须把路由挂载到Vue实例对象上
// Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。
new Vue({
  // 即可以在这用el:('#app')来替代.$mount('#app')进行路由的挂载
  router,
  render: h => h(App)
}).$mount('#app')