# element-ui-layout

**Repository Path**: lzc-code/element-ui-layout

## Basic Information

- **Project Name**: element-ui-layout
- **Description**: vue + element-ui 经典后台管理页面骨架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2019-08-29
- **Last Updated**: 2022-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# element-ui

> vue + element-ui layout, 构建一个通用的，基于vue、element-ui库的后台管理的基本界面

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## 步骤

- vue init webpack element-ui 初始化项目

  小插曲，这样新建的项目package.json里面，name: 'element-ui'，安装element-ui的时候会报错，项目名不能与安装的依赖同名

- 改完名字之后，npm i element-ui，安装element-ui

- 删掉helloWorld

- 配置按需引入，安装babel-plugin-components，按需引入，减小项目体积，css和js

  > 修改.babelrc文件，直接覆盖
  >
  > {
  >   "presets": [
  > ​    ["env", {
  > ​      "modules": false,
  > ​      "targets": {
  > ​        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  > ​      }
  > ​    }],
  > ​    "stage-2"
  >   ],
  >   "plugins": [[
  > ​    "component",
  > ​    {
  > ​      "libraryName": "element-ui",
  > ​      "styleLibraryName": "theme-chalk"
  > ​    }
  >   ], "transform-vue-jsx", "transform-runtime"]
  > }

- 按需引入问题，每个需要用到的组件都要写一遍

   `Vue.component(Components.name, Components)` ，很麻烦，不好看，不优雅

  优雅的办法：

  ```javascript
  // main.js
  import {Button, Input, Form, FormItem /* 0 */} from 'element-ui'
  const components = {Button, Input, Form, FormItem /* 1 */}
  Object.keys(components).forEach(key => {
      Vue.components(components[key].name, components[key])
  })
  // 需要添加组件的时候，只需要在0和1的位置添加相应的组件
  // 要是觉得没用就每个写一遍吧，自动忽略就好了
  // 组件一多，这种方式还是不够优雅
  // 可以新建一个js文件，专门处理引入element组件
  
  // components.js
  import {Button, Input, Form, FormItem /* 0 */} from 'element-ui'
  export default {Button, Input, Form, FormItem /* 1 */}
  
  // main.js
  import components from 'components'
  Object.keys(components).forEach(key => {
      Vue.components(components[key].name, components[key])
  })
  
  // 按需引入，全局配置组件大小
  Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }
  ```

- components文件夹下面新建 `layout.vue` `login.vue` 不带登陆的后台可以去掉login.vue，这两个是最外层的路由，页面变化都在layout里面的<router-view/>变化，也就是子路由

  ```javascript
  // 路由文件结构这样写 router.js
  import login from '@/components/login'
  import layout from '@/components/layout'
  
  routes: [
      {
          path: '/',
          name: 'login',
          component: login
      },
      {
          path: '/user',
          name: 'user',
          component: layout,
          children: [
              {
                  path: 'userList',
                  name: 'userList',
                  component: () => import('@/components/user/userList')
              },
              // 下面可以添加用户模块的子模块
          ]
      },
      // 如果要添加模块，比如商品模块
      {
          path: '/goods',
          name: 'goods',
          component: layout,
          children: [
              {
                  path: 'goodsList',
                  name: 'goodsList',
                  component: () => import('@/components/user/goodsList')
              }
          ]
      }
  ]
  ```