微前端（二）go-login项目开发

雨点打透心脏的1/2处 2023-01-16 06:59 103阅读 0赞

go-login项目是登录项目，登录项1目没有难点就是一个常规登录界面开发，因为这将是首屏界面，注意一下几点

*  尽量不要采用大的ui框架，我这使用elementui 不是全局引入，而是通过局部按需引入的方式来进行加载。
 *  不写多余的js和css，就写登录应用相关代码，保证最终的dist包在300kb之内，这样就可以保证秒开。
 *  不采用vuex、vue-router之类的框架。

1、新建项目

vue create go-login

2、引入less 这里注意less版本，如果版本less-loader过高会有异常。我安装的是 “less-loader”: “^5.0.0”,

npm install less less-loader --save

3、elmentUi的引入  
安装ui组件库

npm i element-ui -S

安装按需引入插件

npm install babel-plugin-component -D

配置babel.config.js

module.exports = {
      presets: [["@babel/preset-env", { "modules": false}]],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }

修改main.js的引入

import Vue from 'vue'
    import App from './App.vue'
    
    //引入scss文件
    import '@/assets/less/index.less';
    import { Autocomplete, Button,Input} from 'element-ui';
    
    
    Vue.component(Autocomplete.name, Autocomplete);
    Vue.component(Button.name, Button);
    Vue.component(Input.name, Input);
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')

4、登录界面代码：  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]

代码如下：app.vue

<template>
      <div id="app" class="wh100b h100b" >
         <loginPage></loginPage>
      </div>
    </template>
    
    <script>
      import loginPage from './components/loginPage'
    
    export default {
      name: 'App',
      components:{
        loginPage
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    </style>

loginPage.vue:

<template>
        <div class="go_login">
           <div class="login_top_bar">
               <ul class="lang_ul">
                   <li v-for="(item,index) in lang" :key="index">
                       {
       {item.label}}
                   </li>
               </ul>
           </div>
            <div class="go_login_logo">
                <img :src="loginImg" alt=""  :style="logoSty">
            </div>
            <div class="login-background-img" :style="imgSty"></div>
            <loginForm></loginForm>
            <div class="login_bottom">
                {
       {copyRightLabel}}
            </div>
        </div>
    </template>
    
    <script>
        import loginForm from './loginForm';
        import sysConfig from "../utils/sysConfig";
    
        export default {
            components:{loginForm},
            name: 'loginPage',
            data:()=>{
                return {
                    copyRightLabel: `Copyright © 2020-2029 ${sysConfig.accountName} 版权所有`,
                    lang:sysConfig.lang,
                    bgImgSrc:'./static/img/banner1.jpeg',
                    loginImg:'./static/logo/logo-white_full_300.png',
                }
            },
            computed:{
                logoSty(){
                    let sty={};
                    sty["width"]='220px';
                    sty["height"]='70px';
                    return sty;
                },
                imgSty(){
                    let sty={};
                    sty["backgroundImage"]='url("./static/img/banner1.jpeg")';
                    sty["backgroundPosition"]='center center';
                    return sty;
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>

登录界面开发完成，登录界面点击登录会跳转到主框架界面go-app-main。下节介绍go-app-main的实现。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: /images/20221022/55c3ab13d41d47bdb90913fd5e9b1dcd.png