ElementUI(具体参考官方文档)

ElementUI

ElementUI是一套为开发者、设计师准备的基于vue的PC端组件库。

搭建ElementUI基础环境（基于脚手架）

1. 新建项目。

   # 配置镜像源
   npm config set registry http://registry.npm.taobao.org
   # 安装VueCLI
   npm install -g @vue/cli
   

   # 找一个空文件夹  VUEUI/day01/demo下执行一个命令
   vue  create  elepro
   # 依次选择
   Manually select features   
   选择 Babel - Router  去掉 linter
   2.x
   是否使用history的路由模式？  回车 Y
   In package.json
   是否将当前上设置作为未来创建项目的预设配置？ 回车 N
   

2. 在新项目中，通过npm i 命令安装ElementUI。

   # 进入新创建的项目目录
   cd elepro
   # 执行安装命令
   npm i element-ui -S
   

   安装成功后，将会在package.json中出现element-ui的依赖。node_modules文件夹下也会出现element-ui的源码包。

3. 在脚手架项目中，main.js配置ElementUI。

   // 引入ElementUI
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   // 全量引入所有组件
   Vue.use(ElementUI)
   

4. 开始使用组件。

   npm run serve
   

   没有编译错误，配置完成。

   npm run serve将会把当前脚手架项目源码进行编译、打包、部署到8080服务器，这样才可以使用浏览器通过请求地址进行访问。

   npm run build命令可以将脚手架项目进行编译，生成dist目录。

案例：访问http://localhost:8080/button，看到elementui的button。

1. 新建src/views/Button.vue，编写ElementUI的Button组件。

2. 配置路由。

   /button      Button.vue
   

ElementUI组件库适合写什么样的网站？

后台管理类网站。（敏捷开发）

ElementUI常用组件

Navmenu组件（导航）

navmenu用于实现导航，其基本结构：

<el-menu mode="horizontal">
	<el-menu-item>导航项1</el-menu-item>
	<el-menu-item>导航项2</el-menu-item>
	<el-menu-item>导航项3</el-menu-item>
	<el-menu-item>导航项4</el-menu-item>
</el-menu>

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

1. 新建vue文件。 views/Nav.vue
2. 配置路由。

设置导航的默认选中项

<el-menu mode="horizontal" default-active="2">
	<el-menu-item index="1">导航项1</el-menu-item>
	<el-menu-item index="2">导航项2</el-menu-item>
	<el-menu-item index="3">导航项3</el-menu-item>
	<el-menu-item index="4">导航项4</el-menu-item>
</el-menu>

设置导航的下拉子菜单

<el-menu mode="horizontal" default-active="2">
	<el-menu-item index="1">导航项1</el-menu-item>
	<el-menu-item index="2">导航项2</el-menu-item>
	<el-submenu index="3">
        主题
        <el-menu-item>炫酷黑</el-menu-item>
        <el-menu-item>猛男粉</el-menu-item>
    </el-submenu>
	<el-menu-item index="4">导航项4</el-menu-item>
</el-menu>

设置垂直导航（侧边栏导航）

<el-menu default-active="2">
	<el-menu-item index="1">导航项1</el-menu-item>
	<el-menu-item index="2">导航项2</el-menu-item>
	<el-menu-item index="3">导航项3</el-menu-item>
	<el-menu-item index="4">导航项4</el-menu-item>
</el-menu>

如何修改组件库组件的默认样式？

1. 查看文档，当前组件是否提供了一个属性用于修改该组件的样式。如果有，则首选使用组件属性修改默认样式。
2. 如果没有提供属性，可以为该组件直接添加style属性设置内联样式。
3. 可以为该组件添加class属性，然后通过<style>来设置组件样式。
4. 在浏览器中右键检查该组件样式类名，然后再<style>直接覆盖该类名，重写相关样式；如果重写后的优先级没有组件默认的优先级高，则可以使用!important来提高样式优先级。

Container布局容器

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

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

修改滚动条的样式

.test{
	height:100px;
	overflow: auto;
}
.test::-webkit-scrollbar {
  width: 15px;
}
<!--修改 滚动条的 下面 的 样式-->
.test::-webkit-scrollbar-track {
  background-color: red;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.test::-webkit-scrollbar-thumb {
  background-color: #191919;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

基于嵌套路由实现main内容的动态更新

嵌套路由可以实现通过多层级的请求资源路径来对页面的局部内容进行动态更新。

例如：
localhost:8080/component/button     看到组件页面中嵌套Button页面
localhost:8080/component/container  看到组件页面中嵌套Container页面
localhost:8080/component/icon		看到组件页面中嵌套icon页面

基于嵌套路由，显示完整的页面内容的步骤：

1. 希望可以处理以下3个路由的页面显示：

   localhost:8080/component/button     看到组件页面中嵌套Button页面
   localhost:8080/component/container  看到组件页面中嵌套Container页面
   localhost:8080/component/icon		看到组件页面中嵌套icon页面
   

2. 编写3个组件页面：Button.vue、Container.vue、Icon.vue

3. 在router/index.js中配置嵌套路由。

     {
       path: '/component',
       name: 'component',
       component: ()=> import('../views/Component.vue'),
       children: [
         {
           path: 'button',
           component: ()=> import('../views/Button.vue')
         },
         ......
       ]
     }
   

4. 在Component页面的el-main，编写<router-view/>，用于动态显示子路由的内容。

   <el-main>
   	<router-view></router-view>
   </el-main>
   

5. 在地址栏输入以下地址，测试嵌套路由的显示效果。

   http://localhost:8080/component/button 
   http://localhost:8080/component/container
   http://localhost:8080/component/icon
   

实现点击左侧边栏导航选项，跳转到相应页面。

为el-menu添加router属性，开启路由模式，这样就会在点击时自动跳转到index指向的地址。

<el-menu router ...>   
    <el-menu-item index="button">
        Button按钮
    </el-menu-item>
</el-menu>

路径跳转规则（相对、绝对）:

当前：http://localhost:8080/component/1111    跳转到:  button
最终：http://localhost:8080/component/button

当前：http://localhost:8080/component/1111    跳转到:  /button
最终：http://localhost:8080/button

当前：http://localhost:8080/component/1111    跳转到:  /component/button
最终：http://localhost:8080/component/button

修改每一个el-menu-item的index属性。点击后页面将跳转到正确的路径。

为/component路由添加redirect， 若用户直接访问/component，则自动重定向到/component/button