VueUI Day01(7.29)Vue 组件库、Vue 组件库、NavMenu 组件、ElementUI 的布局相关组件

 

一、Vue 组件库

各大厂商或开放组织自研的一套基于 Vue 的组件库，开源后让广大程序员直接使用。

ElementUI 饿了么团队研发的一款PC端的 Vue 组件库。

Element - The world's most popular Vue UI framework

MintUI 饿了么团队研发的一款移动端的 Vue 组件库。

Mint UI

Vant 有赞团队研发的一款移动端的 Vue 组件库。

Vant 2 - Mobile UI Components built on Vue

二、ElementUI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

基于 VueCli 搭建 ElementUI 的基础项目环境

1.新建 VueCli 项目。 element-project 。（ Vue 2.x 的项目）

# 安装脚手架 npm install -g @vue/cli # 设置npm淘宝源 加快下载速度 npm config set registry https://registry.npm.taobao.org # 找一个干净目录 day01\demo vue create element-project 等一会 Manually select features 选择：Babel - Router - Css Preprocessors 去掉linter 2.x 以下选项一路回车即可

2. 执行命令，安装 ElementUI 组件库。

# 进入项目目录中，执行安装命令 cd element-project npm i element-ui -S

从仓库中下载 element-ui 组件库的源代码，放在 node_modules 中。并且 -S 选项将会把该依赖关系添加到 package.json 配置文件中。

3. 在 main.js 中全量引入 ElementUI 的组件及样式。

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // use()方法可以将ElementUI中的所有组件全部引入当前Vue项目 // 一旦在此处引入，每一个组件都将可以使用ElementUI的组件 Vue.use(ElementUI);

4. 使用 ElementUI 的组件。

Vue脚手架项目核心文件的关系：

public/index.html

src/main.js

src/App.vue

脚手架项目本质是一个 SPA （单页面应用），也就是无论访问任何地址，都直接加载 public/index.html 。 在该 html 页面中将会加载整个 Vue 环境。加载的过程中将会创建 Vue 对象来管理 body 中的 div#app 。这样就可以由 Vue 来控制页面显示的内容。

脚手架项目在运行时，需要进行编译打包，这样才可以把编写的vue源代码编译成浏览器所能识别的html、css、js代码从而显示网页。如何编译脚手架项目呢？

# 在项目目录下执行以下命令，进行脚手架项目的编译工作 npm run build

build 完毕后将会生成 dist 文件夹，该文件夹就是项目编译打包后的成果。

src/router/index.js

在 index.html 加载 Vue 环境时，将会使用 VueRouter 来管理页面内容的显示。

VueRouter 的功能：可以根据请求资源路径的不同，动态显示 <router-view> 组件的内容。具体需要在router/index.js 文件中进行路由配置。

ElementUI 适合写什么样的网站？ 后台管理网站

三、NavMenu 组件

1.基础使用方式

NavMenu 用于编写页面导航（水平、垂直）。基本结构如下：

案例：访问地址： http://localhost:8080/nav ，看到水平导航。

1. 新建组件页面： views/Nav.vue 。

2. 配置路由： 当访问 /nav 对应 views/nav.vue 。

2.设置默认选中项

3.显示导航子菜单

4.垂直导航

去掉 mode 属性即可。

5.如何修改组件库中组件的默认样式

1. 首选查看文档，看一下组件库文档中是否提供了相关属性用于修改该样式。如果有则直接使用，效果最好。

2. 可以为组件添加 class 属性，然后编写 <style></style> 来设置组件样式。那么该自定义样式直接作用于组件的顶层标签。若发现样式不生效，也可以直接为组件添加 style 内联样式。

3. 右键检查待修改样式的组件，查看哪一个类名管理着该样式，复制该类名，直接在页面的 <style> 标签中重写该类名对应的样式。

如果不生效，可以尝试提高优先级：

四、ElementUI 的布局相关组件

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container> ：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排

列，否则会水平左右排列。

<el-header> ：顶栏容器。

<el-aside> ：侧边栏容器。

<el-main> ：主要区域容器。

<el-footer> ：底栏容器。

案例：访问 http://localhost:8080/container ， 看到 views/Container.vue 。

1. 新建页面组件： views/Container.vue

2. 配置路由。 /container -- Container.vue

案例：访问 http://localhost:8080/component ，看到 views/Component.vue 。

1. 新建页面组件： views/Component.vue ，提供基本布局。顶栏中编写水平导航，侧栏中编写垂直导航，

main 中提供文本。

2. 配置路由。 /component Component.vue 。

拓展

将脚手架项目上传至git 仓库。

1. 登录 gitee ，新建仓库，设置开源。

2. 使用git管理本地的新建脚手架项目。

3. 使用git命令上传至远程仓库。