# lucy_portal_vue

**Repository Path**: lucyliang01/lucy_portal_vue

## Basic Information

- **Project Name**: lucy_portal_vue
- **Description**: 以vue开发的lucy_portal的前端页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-11-19
- **Last Updated**: 2024-03-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README





### Vue后台管理项目

#### Vue项目搭建

###### 1.根据vue ui向导搭建新项目

* 在命令提示符中输入vue  ui 命令，打开vue项目管理器

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/1-%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86.png)

* 选择项目目录

![2](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/2-项目管理.png)

* 包管理器选择 npm,初始化git仓库填写 init project就可以了

![3](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/3-项目创建.png)

* 选择手动配置

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/4-项目创建.png)

* 选择预设安装的插件

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/5-项目创建.png)

* 选择vue版本为2.x,选择eslint配置为Eslint+standard config

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/6-项目创建.png)

  * 根据自己的情况选择保存或者不保存预设



![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/7-项目创建.png)

* 项目创建完成进入项目的管理界面

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/8-项目创建.png)

###### 2. 插件安装

在本项目中要使用到element-ui,在这里安装插件vue-cli-plugin-element

* 点击添加插件，选择vue-cli-plugin-element 插件进行安装

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/1-插件.png)

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/2-插件.png)

* 插件安装中我们要对element按需导入，等待到安装完成

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/3-插件.png)

###### 3. 项目依赖安装

* 在项目中我们会使用less语法，所以我们需要安装less和less-loader依赖

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/依赖-1.png)

* 在项目中使用axios进行http请求，需要安装axios依赖

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/依赖-2.png)

##### 4. 项目创建成功

* 进入任务面板，在serve选项卡中点击运行，项目会进入编译
* 编译完成后，点击启动app按钮，进入项目首页，就表示项目初始化创建成功

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/1-完成.png)

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/2-完成.png)

查看本地的项目目录文件夹

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/1-项目目录.png)

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/项目目录-2.png)

###### 5. 对初始化的项目，不需要的项进行清除

* 删除views文件夹

* 删除HelloWorld.vue文件

* 打开App.vue ，清除原先的代码，至这样的

```
<template>
  <div id="app">根节点</div>
</template>

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


```

* 打开index.js文件，清除不必要的代码

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

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes
})

export default router

```

* 再到管理器面板中下，对项目进行编译，启动

  出现下面的界面说明，编译成功

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/清楚项目-4.png)

  

#### 代码编辑器设置

###### 1. vs code格式化代码配置

* 安装格式化代码插件prettier+eslint

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/配置-0.png)

* shift+ctrl+p 打开命令面板，搜索配置项，打开settings.json,将下面的配置代码拷贝进去

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/设置-1.png)

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/设置-2.png)

  ```js
  {
    // tab 大小为2个空格
    "editor.tabSize": 2,
    // 编辑器换行
    "editor.wordWrap": "off",
    // 保存时格式化
    "editor.formatOnSave": true,
    // 开启 vscode 文件路径导航
    "breadcrumbs.enabled": true,
    // prettier 设置语句末尾不加分号
    "prettier.semi": false,
    // prettier 设置强制单引号
    "prettier.singleQuote": true,
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // vetur 的自定义设置
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_line_length": 30,
        "wrap_attributes": "auto",
        "end_with_newline": false
      },
      "prettier": {
        "singleQuote": true,
        "semi": false,
        "printWidth": 100,
        "wrapAttributes": false,
        "sortAttributes": false
      }
    },
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    }
   
  }
  ```

  
  
  

###### 2. eslint规则配置

参考如下的eslint规则进行配置

```
rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'key-spacing': 0,
    'space-before-function-paren': 0,
    'keyword-spacing': 0,
    'space-infix-ops': 0,
    'no-trailing-spaces': 0,
    'no-multi-spaces': 0,
    'import/no-duplicates': 0,
    'indent': 0,
    'spaced-comment': 0,
    'comma-spacing': 0,
    'object-curly-spacing': 0,
    'comma-dangle': 0,
    'arrow-spacing': 0,
    'space-before-blocks': 0,
    'eol-last': 0,
    'no-multiple-empty-lines': 0,
    'vue/no-parsing-error': [
      2,
      {
        'x-invalid-end-tag': false
      }
    ]
  }
```



#### 登录页面

###### 1. Login.vue创建

* 在compoments文件夹中创建Login.vue

```vue
<template>
  <div>
    登录
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style scoped >
</style>

```

###### 2. 路由配置
```
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router
```

###### 3. 编译并且启动项目,看到登录二字，表示配置成功

   ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/登录-1.png)

###### 4.登录页面布局

   * 全局css

     新建assets/css文件夹下创建gloable.css文件 设置html,body,#app高度百分百

     ```
     html,
      body,
      #app {
        height: 100%;
      }
     ```


​     


​     

   * 全局css在main.js中的引入
   
     ```js
     import Vue from 'vue'
     import App from './App.vue'
     import router from './router'
     import './plugins/element.js'
     //引入全局样式
     import './assets/css/gloable.css'
     
     Vue.config.productionTip = false
     
     new Vue({
       router,
       render: h => h(App)
     }).$mount('#app')
     
     ```
   
   * element-ui组件按需导入
   
     在plugin的element.js替换为如下的代码，如下是官方提供的全部的按需导入的组件，可以按照实际情况删除一些不需要的组件
     
     ```
     import Vue from 'vue'
     import {
       Pagination,
       Dialog,
       Autocomplete,
       Dropdown,
       DropdownMenu,
       DropdownItem,
       Menu,
       Submenu,
       MenuItem,
       MenuItemGroup,
       Input,
       InputNumber,
       Radio,
       RadioGroup,
       RadioButton,
       Checkbox,
       CheckboxButton,
       CheckboxGroup,
       Switch,
       Select,
       Option,
       OptionGroup,
       Button,
       ButtonGroup,
       Table,
       TableColumn,
       DatePicker,
       TimeSelect,
       TimePicker,
       Popover,
       Tooltip,
       Breadcrumb,
       BreadcrumbItem,
       Form,
       FormItem,
       Tabs,
       TabPane,
       Tag,
       Tree,
       Alert,
       Slider,
       Icon,
       Row,
       Col,
       Upload,
       Progress,
       Spinner,
       Badge,
       Card,
       Rate,
       Steps,
       Step,
       Carousel,
       CarouselItem,
       Collapse,
       CollapseItem,
       Cascader,
       ColorPicker,
       Transfer,
       Container,
       Header,
       Aside,
       Main,
       Footer,
       Timeline,
       TimelineItem,
       Link,
       Divider,
       Image,
       Calendar,
       Backtop,
       PageHeader,
       CascaderPanel,
       Loading,
       MessageBox,
       Message,
       Notification
     } from 'element-ui'
     
     Vue.use(Pagination)
     Vue.use(Dialog)
     Vue.use(Autocomplete)
     Vue.use(Dropdown)
     Vue.use(DropdownMenu)
     Vue.use(DropdownItem)
     Vue.use(Menu)
     Vue.use(Submenu)
     Vue.use(MenuItem)
     Vue.use(MenuItemGroup)
     Vue.use(Input)
     Vue.use(InputNumber)
     Vue.use(Radio)
     Vue.use(RadioGroup)
     Vue.use(RadioButton)
     Vue.use(Checkbox)
     Vue.use(CheckboxButton)
     Vue.use(CheckboxGroup)
     Vue.use(Switch)
     Vue.use(Select)
     Vue.use(Option)
     Vue.use(OptionGroup)
     Vue.use(Button)
     Vue.use(ButtonGroup)
     Vue.use(Table)
     Vue.use(TableColumn)
     Vue.use(DatePicker)
     Vue.use(TimeSelect)
     Vue.use(TimePicker)
     Vue.use(Popover)
     Vue.use(Tooltip)
     Vue.use(Breadcrumb)
     Vue.use(BreadcrumbItem)
     Vue.use(Form)
     Vue.use(FormItem)
     Vue.use(Tabs)
     Vue.use(TabPane)
     Vue.use(Tag)
     Vue.use(Tree)
     Vue.use(Alert)
     Vue.use(Slider)
     Vue.use(Icon)
     Vue.use(Row)
     Vue.use(Col)
     Vue.use(Upload)
     Vue.use(Progress)
     Vue.use(Spinner)
     Vue.use(Badge)
     Vue.use(Card)
     Vue.use(Rate)
     Vue.use(Steps)
     Vue.use(Step)
     Vue.use(Carousel)
     Vue.use(CarouselItem)
     Vue.use(Collapse)
     Vue.use(CollapseItem)
     Vue.use(Cascader)
     Vue.use(ColorPicker)
     Vue.use(Transfer)
     Vue.use(Container)
     Vue.use(Header)
     Vue.use(Aside)
     Vue.use(Main)
     Vue.use(Footer)
     Vue.use(Timeline)
     Vue.use(TimelineItem)
     Vue.use(Link)
     Vue.use(Divider)
     Vue.use(Image)
     Vue.use(Calendar)
     Vue.use(Backtop)
     Vue.use(PageHeader)
     Vue.use(CascaderPanel)
     
     Vue.use(Loading.directive)
     
     Vue.prototype.$loading = Loading.service
     Vue.prototype.$msgbox = MessageBox
     Vue.prototype.$alert = MessageBox.alert
     Vue.prototype.$confirm = MessageBox.confirm
     Vue.prototype.$prompt = MessageBox.prompt
     Vue.prototype.$notify = Notification
     Vue.prototype.$message = Message
     
     ```
     
     
     
   * Login.vue页面的布局和css
   
     登录页面进行布局和css的完成，对于必须的数据进行初始化
     
     ```vue
     <template>
       <div class="container">
         <div class="login_box">
           <div class="avatar">
             <img src="../assets/logo.png" alt="">
           </div>
           <div class="login_form">
             <el-form :model="loginModel" :rules="loginModelRule" ref="loginFormRef">
               <el-form-item prop="username">
                 <el-input v-model="loginModel.username" placeholder="请输入用户名">
                   <i slot="prefix" class="el-input__icon el-icon-user"></i>
                 </el-input>
               </el-form-item>
               <el-form-item prop="password">
                 <el-input v-model="loginModel.password" placeholder="请输入密码">
                   <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                 </el-input>
               </el-form-item>
             </el-form>
             <div class="btn_box">
               <el-button type="primary">
                 登录
               </el-button>
               <el-button>重置
               </el-button>
             </div>
           </div>
         </div>
       </div>
     </template>
     
     <script>
     export default {
       data() {
         return {
           loginModel: {
             username: '',
             password: '',
           },
           loginModelRule: {},
         }
       },
       mounted() {},
       methods: {},
     }
     </script>
     
     <style scoped lang="less">
     .container {
       height: 100%;
       background-color: #2b4b6b;
       .login_box {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 450px;
         height: 300px;
         background-color: #fff;
         border-radius: 5px;
         .avatar {
           position: absolute;
           left: 50%;
           transform: translate(-50%, -50%);
           height: 130px;
           width: 130px;
           border-radius: 50%;
           overflow: hidden;
           border: 1px solid #eee;
           background-color: #fff;
           padding: 10px;
           box-shadow: 0 0 10px #ddd;
           img {
             width: 100%;
             height: 100%;
             border-radius: 50%;
           }
         }
       }
     }
     .login_form {
       margin-top: 100px;
       padding: 0 20px;
     }
     .btn_box {
       text-align: right;
     }
     </style>
     
     ```
     
     
     
###### 5.登录页面数据绑定

   * axios配置,在main.js中替换如下页面

     ```js
     import Vue from 'vue'
     import App from './App.vue'
     import router from './router'
     import './plugins/element.js'
     import axios from 'axios'
     //引入全局样式
     import './assets/css/gloable.css'
     
     //设置请求统一路径
     axios.defaults.baseURL = 'https://192.168.2.60:12400/api/'
     // 添加请求拦截器
     axios.interceptors.request.use(function(config) {
       //从sessionStorage中后去token
       config.headers.Authorization = window.sessionStorage.getItem('token')
       return config
     })
     
     // 添加响应拦截器
     axios.interceptors.response.use(function(response) {
       return response.data
     })
     Vue.use(axios)
     
     Vue.config.productionTip = false
     
     new Vue({
       router,
       render: h => h(App)
     }).$mount('#app')
     
     ```

     

   * 登录接口调用

     ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/接口-1.png)

     页面代码如下

     ```vue
     <template>
       <div class="container">
         <div class="login_box">
           <div class="avatar">
             <img src="../assets/logo.png" alt="">
           </div>
           <div class="login_form">
             <el-form :model="loginModel" :rules="loginModelRule" ref="loginFormRef">
               <el-form-item prop="username">
                 <el-input v-model="loginModel.username" placeholder="请输入用户名">
                   <i slot="prefix" class="el-input__icon el-icon-user"></i>
                 </el-input>
               </el-form-item>
               <el-form-item prop="password">
                 <el-input type="password" v-model="loginModel.password" placeholder="请输入密码">
                   <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                 </el-input>
               </el-form-item>
             </el-form>
             <div class="btn_box">
               <el-button type="primary" @click="login">
                 登录
               </el-button>
               <el-button @click="reset">重置
               </el-button>
             </div>
           </div>
         </div>
       </div>
     </template>
     
     <script>
     export default {
       data() {
         return {
           //form绑定的表单对象
           loginModel: {
             username: '',
             password: '',
           },
           //验证规则
           loginModelRule: {
             username: [
               { required: true, message: '请输入用户名', trigger: 'blur' },
               { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
             ],
             password: [
               { required: true, message: '请输入密码', trigger: 'blur' },
               { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
             ],
           },
         }
       },
       methods: {
         login() {
           //预验证
           this.$refs.loginFormRef.validate(async (valid) => {
             if (!valid) return
             //发送登录请求
             const res = await this.$http.post('user/login', this.loginModel)
             if (!res.flag) return this.$message.error(res.msg)
             this.$message.success('登录成功')
             //登录成功后
             //保存token到sessionStorage中
             window.sessionStorage.setItem('token', res.data.token)
             //跳转到首页
             this.$router.push('/home')
           })
         },
         reset() {
           this.$refs.loginFormRef.resetFields()
         },
       },
     }
     </script>
     
     <style scoped lang="less">
     .container {
       height: 100%;
       background-color: #2b4b6b;
       .login_box {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 450px;
         height: 300px;
         background-color: #fff;
         border-radius: 5px;
         .avatar {
           position: absolute;
           left: 50%;
           transform: translate(-50%, -50%);
           height: 130px;
           width: 130px;
           border-radius: 50%;
           overflow: hidden;
           border: 1px solid #eee;
           background-color: #fff;
           padding: 10px;
           box-shadow: 0 0 10px #ddd;
           img {
             width: 100%;
             height: 100%;
             border-radius: 50%;
           }
         }
       }
     }
     .login_form {
       margin-top: 100px;
       padding: 0 20px;
     }
     .btn_box {
       text-align: right;
     }
     </style>
     
     ```

     * 跳转到/home路径

       在components中创建Home.vue

       ```
       <template>
         <div>
       首页
         </div>
       </template>
       
       <script>
       export default {
         data() {
           return {}
         },
         created() {},
         mounted() {},
         methods: {},
       }
       </script>
       
       <style scoped lang="less">
       </style>
       
       ```

       路径添加/home，router/index.js代码替换如下

       ```
       import Vue from 'vue'
       import VueRouter from 'vue-router'
       import Login from '../components/Login.vue'
       import Home from '../components/Home.vue'
       
       Vue.use(VueRouter)
       
       const routes = [
         {
           path: '/',
           redirect: '/login'
         },
         {
           path: '/login',
           component: Login
         },
         {
           path: '/home',
           component: Home
         }
       ]
       
       const router = new VueRouter({
         routes
       })
       
       export default router
       
       ```

       

       至此登录相关的功能完成，登录完成后如下

       ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/登录.gif)

#### 后台主页布局

###### 1.后台页面布局

* 页面布局

```vue
<template>
  <el-container>
    <el-header></el-header>
    <el-container>
      <el-aside width="200px"></el-aside>
      <el-main></el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {}
</script>

<style scoped lang="less">
.el-container {
  height: 100%;
}
.el-header,
.el-aside {
  background-color: #334157;
}
</style>

```

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/主页-1.png)

* header布局

  ```
  <template>
    <el-container>
      <el-header>
        <div class="header-title">
          <i class="el-icon-s-promotion"></i>
          <span>后台管理系统</span>
        </div>
        <el-menu mode="horizontal" background-color="#334157" text-color="#ddd" active-text-color="#ddd">
          <el-submenu index="1">
            <template slot="title">
              我的工作台
            </template>
            <el-menu-item index="1-1">个人信息</el-menu-item>
            <el-menu-item index="1-2">修改密码</el-menu-item>
            <el-menu-item index="1-3">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px"></el-aside>
        <el-main></el-main>
      </el-container>
    </el-container>
  </template>
  
  <script>
  export default {}
  </script>
  
  <style scoped lang="less">
  .el-container {
    height: 100%;
  }
  .el-header,
  .el-aside {
    background-color: #334157;
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-title {
      display: flex;
      align-items: center;
      color: #ddd;
      i {
        font-size: 40px;
        margin-right: 15px;
      }
      span {
        font-size: 20px;
      }
    }
    .el-menu {
      border-bottom: 0;
    }
  }
  </style>
  
  ```

  

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/主页-2.png)



  

###### 2.菜单布局
```
<template>
  <el-container>
    <el-header>
      <div class="header-title">
        <i class="el-icon-s-promotion"></i>
        <span>后台管理系统</span>
      </div>
      <el-menu mode="horizontal" background-color="#334157" text-color="#ddd" active-text-color="#ddd">
        <el-submenu index="1">
          <template slot="title">
            我的工作台
          </template>
          <el-menu-item index="1-1">个人信息</el-menu-item>
          <el-menu-item index="1-2">修改密码</el-menu-item>
          <el-menu-item index="1-3">退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside :width="isCollasp?'64px':'200px'">
        <el-radio-group v-model="isCollasp" size="small">
          <el-radio-button :label="false">收起</el-radio-button>
          <el-radio-button :label="true">展开</el-radio-button>
        </el-radio-group>
        <el-menu background-color="#334157" text-color="#ddd" active-text-color="#409EF" :collapse="isCollasp" :collapse-transition="false">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item index="1-1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一一</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main></el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollasp: false
    }
  }
}
</script>

<style scoped lang="less">
.el-container {
  height: 100%;
}
.el-header,
.el-aside {
  background-color: #334157;
}
.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-title {
    display: flex;
    align-items: center;
    color: #ddd;
    i {
      font-size: 40px;
      margin-right: 15px;
    }
    span {
      font-size: 20px;
    }
  }
  .el-menu {
    border-bottom: 0;
  }
}

.el-aside {
  .el-radio-group {
   margin: 10px 0 15px 5px;
  }
  .el-menu {
    border-right: 0;
  }
}
</style>

```

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/主页-3.png)



###### 3.获取菜单数据

```
<template>
  <el-container>
    <el-header>
      <div class="header-title">
        <i class="el-icon-s-promotion"></i>
        <span>后台管理系统</span>
      </div>
      <el-menu mode="horizontal" background-color="#334157" text-color="#ddd" active-text-color="#ddd">
        <el-submenu index="1">
          <template slot="title">
            我的工作台
          </template>
          <el-menu-item index="1-1">个人信息</el-menu-item>
          <el-menu-item index="1-2">修改密码</el-menu-item>
          <el-menu-item index="1-3">退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside :width="isCollasp ? '64px' : '200px'">
        <el-radio-group v-model="isCollasp" size="small">
          <el-radio-button :label="false">收起</el-radio-button>
          <el-radio-button :label="true">展开</el-radio-button>
        </el-radio-group>
        <el-menu background-color="#334157" text-color="#ddd" active-text-color="#409EF" :collapse="isCollasp" :collapse-transition="false">
          <el-submenu v-for="item in menuList" :index="item.Id" :key="item.Id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.MenuName}}</span>
            </template>
            <el-menu-item v-for="item in item.Children" :index="item.Id" :key="item.Id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.MenuName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main></el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollasp: false,
      menuList: []
    }
  },
  mounted() {
    this.getMenus()
  },
  methods: {
    async getMenus() {
      const res =await this.$http.get('menus')
      this.menuList = res
    }
  }
}
</script>

<style scoped lang="less">
.el-container {
  height: 100%;
}
.el-header,
.el-aside {
  background-color: #334157;
}
.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-title {
    display: flex;
    align-items: center;
    color: #ddd;
    i {
      font-size: 40px;
      margin-right: 15px;
    }
    span {
      font-size: 20px;
    }
  }
  .el-menu {
    border-bottom: 0;
  }
}

.el-aside {
  .el-radio-group {
    margin: 10px 0 15px 5px;
  }
  .el-menu {
    border-right: 0;
  }
}
</style>

```

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/主页-5.png)

###### 4.导入外部的icon-font

* 从iconfont上选择需要的icon图标，并且下载代码放在assets/icon文件夹中

* 在main.js入口文件中添加iconfont.css的引入

  ```
  //引入iconfont
  import './assets/icon/iconfont.css'
  ```

  

* 在Home.vue中替换菜单的图标为iconfont图标

  ```
  <template>
    <el-container>
      <el-header>
        <div class="header-title">
          <i class="el-icon-s-promotion"></i>
          <span>后台管理系统</span>
        </div>
        <el-menu mode="horizontal" background-color="#334157" text-color="#ddd" active-text-color="#ddd">
          <el-submenu index="1">
            <template slot="title">
              我的工作台
            </template>
            <el-menu-item index="1-1">个人信息</el-menu-item>
            <el-menu-item index="1-2">修改密码</el-menu-item>
            <el-menu-item index="1-3">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside :width="isCollasp ? '64px' : '200px'">
          <el-radio-group v-model="isCollasp" size="small">
            <el-radio-button :label="false">收起</el-radio-button>
            <el-radio-button :label="true">展开</el-radio-button>
          </el-radio-group>
          <el-menu background-color="#334157" text-color="#ddd" active-text-color="#409EF" :collapse="isCollasp" :collapse-transition="false">
            <el-submenu v-for="item in menuList" :index="item.Id" :key="item.Id">
              <template slot="title">
                <i :class="item.MenuIcon"></i>
                <span>{{item.MenuName}}</span>
              </template>
              <el-menu-item v-for="item in item.Children" :index="item.Id" :key="item.Id">
                <template slot="title">
                  <i class="iconfont icon-caidan"></i>
                  <span>{{item.MenuName}}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main></el-main>
      </el-container>
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isCollasp: false,
        menuList: []
      }
    },
    mounted() {
      this.getMenus()
    },
    methods: {
      async getMenus() {
        const res =await this.$http.get('menus')
        this.menuList = res
      }
    }
  }
  </script>
  
  <style scoped lang="less">
  .el-container {
    height: 100%;
  }
  .el-header,
  .el-aside {
    background-color: #334157;
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-title {
      display: flex;
      align-items: center;
      color: #ddd;
      i {
        font-size: 40px;
        margin-right: 15px;
      }
      span {
        font-size: 20px;
      }
    }
    .el-menu {
      border-bottom: 0;
    }
  }
  
  .el-aside {
    .el-radio-group {
      margin: 10px 0 15px 5px;
    }
    .el-menu {
      border-right: 0;
      .iconfont{
        margin-right: 10px;
      }
    }
  }
  </style>
  
  ```

  

###### 4.菜单导航

* 菜单开启路由，并且替换子菜单的index属性为菜单的路径

  在el-menu节点上开启router 

  ```
  :router="true"
  ```

  并且设置子菜单的index属性

  ```
  :index="item.MenuPath"
  ```

  在el-main内容更改为

  ```
  <router-view></router-view>
  ```

  这样就可以实现点击子菜单跳转到指定的路径

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/主页-6.gif)

  

* 更改路由

  1.添加Welcome.Vue

  添加一个Welcome.vue文件

  ```
  <template>
    <div>
  Welcome
    </div>
  </template>
  
  <script>
    export default {
  
    }
  </script>
  
  <style scoped>
  
  </style>
  
  ```

  

  2.添加Users.vue

  ```
  <template>
    <div>用户列表</div>
  </template>
  
  <script>
  export default {}
  </script>
  
  <style scoped lang="less"></style>
  
  ```

  3. 更改路由配置 router/index.js

     为home路由添加子路由

     ```
     import Vue from 'vue'
     import VueRouter from 'vue-router'
     import Login from '../components/Login.vue'
     import Home from '../components/Home.vue'
     import Welcome from '../components/Welcome.vue'
     import Users from '../components/Users.vue'
     
     Vue.use(VueRouter)
     
     const routes = [{
         path: '/',
         redirect: '/login'
       },
       {
         path: '/login',
         component: Login
       },
       {
         path: '/home',
         component: Home,
         children: [{
             path: '/',
             component: Welcome
           },
           {
             path: '/users',
             component: Users
           }
         ]
       }
     ]
     
     const router = new VueRouter({
       routes
     })
     
     export default router
     
     ```

     ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/主页-7.gif)

###### 5.导航守卫

在main.js中设置导航守卫，在用户没有登录的时候，访问除/login路径外都会跳转到/login进行登录，如果用户已经登录，则放行访问

在router/index.js下添加如下代码

```
//导航守卫
router.beforeEach((to ,from,next)=>{
  if(to.path==='/login') return next()
  const tokenStr=window.sessionStorage.getItem('token')
  if(!tokenStr) return next('/login')
  next()
})
```

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/主页-8.gif)

##### 用户列表页面布局

###### 1.页面布局

* 页面布局

  ```
  <template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-table><el-table-column type="index"></el-table-column></el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 100, 500]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        query: '',
        pageIndex: 1,
        pageSize: 10,
        total: 0
      }
    },
    methods: {
      handleSizeChange(newSize) {
        this.pageSize = newSize
      },
      handleCurrentChange(newPage) {
        this.pageIndex = newPage
      }
    }
  }
  </script>
  
  <style scoped lang="less">
  
  </style>
  
  ```

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/用户-1.png)

  

###### 2.获取分页数据

* 接口调用

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/用户-2.png)



###### 3.绑定页面

* 数据绑定

  通过接口获取分页用户的数据，并且绑定在列表上

  ```
  <template>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <!-- 列表 -->
        <el-table :data="list">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="UserName" label="用户名"></el-table-column>
          <el-table-column prop="UserType" label="用户类型"></el-table-column>
          <el-table-column prop="IsValid" label="是否启用"></el-table-column>
          <el-table-column prop="CreateTime" label="创建时间"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 100, 500]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        query: '',
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        list: []
      }
    },
    methods: {
      handleSizeChange(newSize) {
        this.pageSize = newSize
      },
      handleCurrentChange(newPage) {
        this.pageIndex = newPage
      },
      async getList() {
        const res = await this.$http.get('user/pager', { params: { query: this.query, pageSize: this.pageSize, pageIndex: this.pageIndex } })
        this.total = res.total
        this.list = res.list
      }
    },
    mounted() {
      this.getList()
    }
  }
  </script>
  
  <style scoped lang="less"></style>
  
  ```

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/用户-3.png)

* 创建dateformate过滤器

  在plugins文件夹下添加文件filter.js

  ```
  import Vue from 'vue'
  Vue.filter('dateformate',function(value){
  var d= new Date(value)
  const year= d.getFullYear()
  const month= (d.getMonth()+1+'').padStart(2,'0')
  const day=(d.getDate()+'').padStart(2,'0')
  const hour=(d.getHours()+'').padStart(2,'0')
  const minutes=(d.getMinutes()+'').padStart(2,'0')
  const seconds=(d.getSeconds()+'').padStart(2,'0')
  
  return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`
  })
  
  ```

  在main.js中引入filter.js

  ```
  //导入过滤器
  import './plugins/filter.js'
  ```

  

* 列表优化

  对于用户类型使用tag标签进行显示优化，对于是否启用使用switch组件进行优化，对于创建时间使用filter进行格式化

  ```
  <template>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <!-- 列表 -->
        <el-table :data="list">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="UserName" label="用户名"></el-table-column>
          <el-table-column prop="UserType" label="用户类型">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.UserType==1">系统管理员</el-tag>
              <el-tag type="warning" v-if="scope.row.UserType==2">普通用户</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="IsValid" label="是否启用">
           <template slot-scope="scope">
              <el-switch v-model="scope.row.IsValid"></el-switch>
           </template>
          </el-table-column>
          <el-table-column prop="CreateTime" label="创建时间">
            <template slot-scope="scope">
              <span>{{scope.row.CreateTime|dateformate}}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 100, 500]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        query: '',
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        list: []
      }
    },
    methods: {
      handleSizeChange(newSize) {
        this.pageSize = newSize
      },
      handleCurrentChange(newPage) {
        this.pageIndex = newPage
      },
      async getList() {
        const res = await this.$http.get('user/pager', { params: { query: this.query, pageSize: this.pageSize, pageIndex: this.pageIndex } })
        this.total = res.total
        this.list = res.list
      }
    },
    mounted() {
      this.getList()
    }
  }
  </script>
  
  <style scoped lang="less"></style>
  
  ```

  

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/用户-4.png)

* 分页绑定

  ```
   <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 100, 500]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
  ```

  函数的绑定

  ```
  //改变显示页码触发
      handleSizeChange(newSize) {
        this.pageSize = newSize
        this.getList()
      },
      //跳转页面触发
      handleCurrentChange(newPage) {
        this.pageIndex = newPage
        this.getList()
      },
  ```

  

* 查询

在el-table上面添加查询条件行

```
 <!-- 查询条件和按钮 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="query" >
            <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4"><el-button type="primary" >新增</el-button></el-col>
      </el-row>
```

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/用户-5.png)



#### 修改用户状态

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/用户-6.png)

###### 1.创建修改状态的函数 changeState

```
 async changeState(info) {
      const res = await this.$http.post(`/user/edit/${info.Id}`, info)
      if (!res.flag) {
        info.IsValid = !info.IsValid
        return this.$message.error(res.msg)
      }
      this.$message.success('修改状态成功')
    }
```

###### 2.在状态列绑定该函数

```
 <el-table-column prop="IsValid" label="是否启用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.IsValid" @change="changeState(scope.row)"></el-switch>
          </template>
        </el-table-column>
```



#### 新增用户

###### 1.dialog布局

在el-card下添加对话框

```
  <!-- 新增对话框 -->
    <el-dialog title="新增用户" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="addModel" :rules="addModelRules" ref="addFormRef" label-width="100px">
        <el-form-item label="用户名" prop="UserName"><el-input v-model="addModel.UserName"></el-input></el-form-item>
        <el-form-item label="用户类型" prop="UserType">
          <el-select v-model="addModel.UserType" placeholder="请选择">
            <el-option v-for="item in userTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" prop="IsValid"><el-switch v-model="addModel.IsValid"></el-switch></el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
```
并提供相关的数据绑定
```
 addDialogVisible: false,
      addModel: {},
      addModelRules: {
        UserName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
        UserType: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      },
      userTypeList: [{ value: '1', label: '系统管理员' }, { value: '2', label: '普通用户' }]
```





###### 2.提交新增

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/用户-7.png)

在methods中添加add方法绑定在确定按钮上

```
add() {
      //表单与预验证
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        const res = await this.$http.post('user/add', this.addModel)
        if (!res.flag) return this.$message.error(res.msg)
        this.$message.success('新增用户成功')
         //关闭弹窗
        this.addDialogVisible=false
        //刷新页面
        this.getList()
      })
    }
```



###### 3.表单重置

在el-dialog中的close方法绑定重置表单的方法

```
resetAddForm(){
      this.$refs.addFormRef.resetFields()
    }
```

###### 4.用户列表整体效果和代码

* 整体的页面效果演示如下

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/用户-8.gif)

* Users.vue组件的整体代码

  ```
  <template>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <!-- 查询条件和按钮 -->
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input placeholder="请输入内容" v-model="query"><el-button slot="append" icon="el-icon-search" @click="getList"></el-button></el-input>
          </el-col>
          <el-col :span="4"><el-button type="primary" @click="addDialogVisible = true">新增</el-button></el-col>
        </el-row>
        <!-- 列表 -->
        <el-table :data="list">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="UserName" label="用户名"></el-table-column>
          <el-table-column prop="UserType" label="用户类型">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.UserType == 1">系统管理员</el-tag>
              <el-tag type="warning" v-if="scope.row.UserType == 2">普通用户</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="IsValid" label="是否启用">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.IsValid" @change="changeState(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="CreateTime" label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.CreateTime | dateformate }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 100, 500]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
      <!-- 新增对话框 -->
      <el-dialog title="新增用户" :visible.sync="addDialogVisible" width="30%" @close="resetAddForm">
        <el-form :model="addModel" :rules="addModelRules" ref="addFormRef" label-width="100px">
          <el-form-item label="用户名" prop="UserName"><el-input v-model="addModel.UserName"></el-input></el-form-item>
           <el-form-item label="密码" prop="Password"><el-input v-model="addModel.Password" type="password"></el-input></el-form-item>
          <el-form-item label="用户类型" prop="UserType">
            <el-select v-model="addModel.UserType" placeholder="请选择">
              <el-option v-for="item in userTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否启用" prop="IsValid"><el-switch v-model="addModel.IsValid"></el-switch></el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        query: '',
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        list: [],
        addDialogVisible: false,
        addModel: {
          UserName:'',
          Password:'',
          UserType:'',
          IsValid:true
        },
        addModelRules: {
          UserName: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }],
           Password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }],
          UserType: [{ required: true, message: '请选择用户类型', trigger: 'blur' }]
        },
        userTypeList: [{ value: '1', label: '系统管理员' }, { value: '2', label: '普通用户' }]
      }
    },
    methods: {
      //改变显示页码触发
      handleSizeChange(newSize) {
        this.pageSize = newSize
        this.getList()
      },
      //跳转页面触发
      handleCurrentChange(newPage) {
        this.pageIndex = newPage
        this.getList()
      },
      async getList() {
        const res = await this.$http.get('user/pager', { params: { query: this.query, pageSize: this.pageSize, pageIndex: this.pageIndex } })
        this.total = res.total
        this.list = res.list
      },
      async changeState(info) {
        const res = await this.$http.post(`/user/edit/${info.Id}`, info)
        if (!res.flag) {
          info.IsValid = !info.IsValid
          return this.$message.error(res.msg)
        }
        this.$message.success('修改状态成功')
      },
      add() {
        //表单与预验证
        this.$refs.addFormRef.validate(async valid => {
          if (!valid) return
          const res = await this.$http.post('user/add', this.addModel)
          if (!res.flag) return this.$message.error(res.msg)
          this.$message.success('新增用户成功')
          //关闭弹窗
          this.addDialogVisible=false
          //刷新页面
          this.getList()
        })
      },
      resetAddForm(){
        this.$refs.addFormRef.resetFields()
      }
    },
    mounted() {
      this.getList()
    }
  }
  </script>
  
  <style scoped lang="less">
  .el-table {
    margin-top: 15px;
  }
  </style>
  
  ```

  

#### Vue项目优化

###### 1.生成项目报告

* 通过UI的任务面板中，进行打包，通过查看控制台和分析生成打包报告

  打包后进入的控制台面板

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/打包-1.gif)

  输出面板

  

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/打包-2.png)

  分析面板

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/打包-3.png)

* 从报告中查看本项目所存在的问题

  主要的问题是

   css/chunk-vendors.e90756f2.css
        js/chunk-vendors.299c40ed.js
        css/app.80898f24.css
        js/app.3faa412c.js

  这几个的文件过大，那么之后的打包优化也会针对打包文件过大进行优化处理

###### 2.vue.config.js修改webpack配置

项目隐藏了webpack的默认配置，如果需要修改webpack的默认配置，在根目录下创建vue.config.js

###### 3.打包入口文件

现在的开发模式和打包模式的共用了同一个打包入口文件main.js。

为两种模式分别创建不同的打包入口文件。main-dev.js和main-prod.js

###### 4.配置chainWebpack更改webpack的配置

在vue.config.js的导出对象中，配置chainWebpack修改webpack的默认配置

chainWebpack是通过链式编程的方式修改webpack的默认配置

* 修改不同模式下的打包入口文件，在vue.config.js中配置如下的代码

  ```
  module.exports = {
    chainWebpack: config => {
      config.when(process.env.NODE_ENV == 'production', config => {
        config.entry('app').clear().add('./src/main-prod.js')
      })
      config.when(process.env.NODE_ENV == 'development', config => {
        config.entry('app').clear().add('./src/main-dev.js')
      })
    }
  }
  
  ```

###### 5.通过externals配置加载外部cdn资源

通过import导入的依赖项，最后都会被打包在chunk-verdos.js文件中，导致单文件体积过大

* 在config.js的生产模式中针对开发的依赖项进行下面的配置

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/打包-4.png)

  把axios,vue,vue-router进行外部配置，以包名：对象名的对应方式进行配置

  ```
   config.set('externals',{
        vue:'Vue',
        'vue-router':'VueRouter',
        axios:'axios'
      })
  ```

* 在/public/index.html中，引入如下的cdn配置

  引入cdn的时候要对应依赖项的版本，做到版本一致

  ```
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
  		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js"></script>
  		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
  ```

* 重新在build面板中执行，发现打包文件小了一些，但是大小还是处于报警的状态，我们要进行进一步的优化

###### 6.element-ui的优化

* 在main-prod.js中删除element-ui按需加载的代码

* 在public/index.html引入相关的css和js资源

  ```
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
  ```

* 在build中运行后，发现项目文件的大小瞬间降下来了。对chunk-verdos.js文件大小的优化就到位了。

  ![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/打包-5.png)

###### 7.首页内容定制

首页我们首页引入的cdn资源，并没有区分生产模式还是开发模式，其实应该是在生产模式下才对首页的cdn资源引入。

* 在web.config.js中加入如下的配置，设置一个isProd的参数区分是生产模式还是开发模式

```
   //生产模式
      config.plugin('html').tap(args=>{
        args[0].isProd=true
        return args
      })
      
       //开发模式
      config.plugin('html').tap(args=>{
        args[0].isProd=false
        return args
      })
```

* 对public/index.html进行改造

  ```
  <!DOCTYPE html>
  <html lang="en">
  	<head>
  		<meta charset="utf-8">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  		<meta name="viewport" content="width=device-width,initial-scale=1.0">
  		<link rel="icon" href="<%= BASE_URL %>favicon.ico">
  		<title>
  			<%= htmlWebpackPlugin.options.isProd?'':'dev-' %>后台管理系统</title>
  		<%if(htmlWebpackPlugin.options.isProd){%>
  		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
  		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
  		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js"></script>
  		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
  		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
  		<%}%>
  
  	</head>
  	<body>
  		<noscript>
  			<strong>We're sorry but
  				<%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
  				continue.</strong>
  		</noscript>
  		<div id="app"></div>
  		<!-- built files will be auto injected -->
  	</body>
  </html>
  
  ```

  再次运行build，检查在生产模式和开发模式下代码的异同

###### 8.路由懒加载

在打包的过程中，项目中的js代码会被打包在app.xxxxxxx.js中，随着开发的进行app.xxxxxx.js文件的体积会越来越大。

路由懒加载会把js文件分组打包在不同的文件中，只有相关的组件被访问到的时候才会加载对应的js文件，从而提高网站的访问速度。

具体的配置步骤：

* 安装开发依赖@babel/plugin-syntax-dynamic-import

* 在babel.config.js中声明该插件

  ```
  module.exports = {
    presets: [
      '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
      [
        'component',
        {
          libraryName: 'element-ui',
          styleLibraryName: 'theme-chalk'
        }
      ],
      '@babel/plugin-syntax-dynamic-import'
    ]
  }
  
  ```

  

* 将路由改成按需加载的形式

  ```js
  const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
  ```
  
  router/index.js代码修改如下，把引入组件的代码修改如下
  
  ```
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  // import Login from '../components/Login.vue'
  // import Home from '../components/Home.vue'
  // import Welcome from '../components/Welcome.vue'
  const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
  const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
  const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')
  // import Users from '../components/Users.vue'
  const Users = () => import(/* webpackChunkName: "users" */ '../components/Users.vue')
  ```
  
  修改完成后重新进行build打包
  
  发现app.xxxxx.js变小很多，同时出现了login_home_welcome.js和users.js

###### 9.开发模式下console.log的删除

* 安装插件babel-plugin-transform-remove-console

* 配置babel.config.js,配置在生产模式 下需要的插件，并且以对象展开的方式放在需要的插件的地方

  ```
  // 所有生产环境需要的依赖
  const prodPlugin = []
  
  if (process.env.NODE_ENV === 'production') {
  
  // 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
    prodPlugin.push([
      'transform-remove-console',
      {
        // 保留 console.error 与 console.warn
        exclude: ['error', 'warn']
      }
    ])
  }
  
  module.exports = {
    presets: [
      '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
      [
        'component',
        {
          libraryName: 'element-ui',
          styleLibraryName: 'theme-chalk'
        }
      ],
      '@babel/plugin-syntax-dynamic-import',
      ...prodPlugin
    ]
  }
  
  ```

#### Vue项目部署

###### 1.ngnix映射配置

在ngnix.conf文件做如下的映射配置

```
#html文件
    server {
        listen       9001;  									#映射端口
        server_name  127.0.0.1 localhost;						#映射ip

        location / {
            root  J:/codes/lucy_portal/lucy_portal_vue/dist;	#物理路径
            index  index.html index.htm;						#首页
        }
    }
```

配置后打开ngnix，浏览器中访问localhost:9001

整体的效果如下

![](https://gitee.com/lucyliang01/image-repository/raw/master/lucy_portal_vue/打包-6.gif)



#### 项目总结

###### 1.本项目可以达到的学习目标

* ElementUI使用
* 路由使用
* 路由拦截
* 导航守卫
* 异步请求
* Vue项目的常见的打包优化方法
* Vue项目的部署
* 在短时间内学习Vue后台项目从创建到部署
* 对于中小型的项目来说，基本点已经涉及到了

###### 2.项目的缺点

* 项目在业务功能上只完成了用户列表，还有其他的管理有待完成

* 项目功能相对基础，是否适合真正的生产模式，还有待思考

  

#### TodoList

###### 1.根据教程自己做一遍，查漏补缺

###### 2.把服务端的接口和接口文档暴露出来

###### 3.进一步完善功能