9.06 Day47---Element UI局部组件库的使用

目录

创建一个vue工程：

SPA：

一切皆组件

在App.vue文件中：

全局唯一的路由配置文件router/index.js：

在HomView.vue文件中：

代码分析：

 Element UI局部组件库的使用：

1.官网：

2.安装

3.导入

---

创建一个vue工程：

 

 

 

 路由Vue Router：

路由的作用是用来跳转页面的

但是Vue工程是SPA工程，只存在一个HTML页面，其他的全部称为组件

把组件当作页面进行跳转需要使用到Vue路由

 

右击用idea打开：

 

SPA：

单页web应用(single page web application,SPA),就是只有一张web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新页面的web应用程序 

一切皆组件

工程启动后访问http://localhost:8080/

访问的是index.html

 

这个空div里面默认挂载的是App.vue中<template>里面的内容 

在App.vue文件中：

 

 

全局唯一的路由配置文件router/index.js：

 

在HomView.vue文件中：

 

代码分析：

 

 

 

通过路由挂载组件的几个必要点：

1.要有路由挂载器<router-view/>，路由挂载可以在任意地方定义

2.要有路由挂载链接<router-link to=" "></router-link>

3.要在router/index中注册组件和路由地址关系

页面级别的组件才会用到路由挂载，这一类组件的vue文件创建在src/views中

页面中的局部组件创建在src/components中,这一类组件不通过路由挂载，而是采用父子组件

 Element UI局部组件库的使用：

1.官网：

元素 - 全球最受欢迎的 Vue UI 框架 (eleme.cn)

注意当前的Vue工程是2.x还是3.x版本

2.安装

3.导入

因为Element UI这个三方库中提供了很多的局部组件，导入方式有两种

按需导入(局部导入)，用的什么组件导入什么组件

就像是在UserView导入UserTable一样

被导入的子组件只能在当前父组件使用

全局导入：

一次性导入所有的局部组件

可以在任意的组件中使用这些局部组件

按钮：

滚动条：

 

 

From表单组件：

 Vue2.x和Vue3.x的区域：

Vue2.x中使用的语言是Javascript

Vue3.x中使用的是语言可以是Javascript(js),还可以支持Typescript(ts)

建议使用vue2+ElementUI2版本