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

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、登录界面代码：
效果如下：

代码如下：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的实现。