环境搭建_登录组件_vuex自动引入

1. 环境搭建

项目前期配置
1 构建项目：

vue create finance-manager;  cd finance-manager;  

2 项目配置
bable/ vuex/ vue version/css Pre-processors/Router
vue2/ Sass/scss(with dart-sass)
history? n 需要服务器配合
save this as a preset ?n

3 安装第三方依赖

npm i axios jsonwebtoken vue-count-to echarts element-ui@2.15.0 -S

JWT的解密码：
jindu520

menus.json: 后台给的路由接口，通过menu生成动态路由
4 接口文档：

账号：admin
密码：approve123456.

npm run serve

router和store已经配置好了

添加Login.vue文件

<template>
    <div>
        我是Login
    </div>
</template>
  
<script>
export default {
    
}
</script>

<style scoped></style>

在router下的index.js添加Login.vue的路由:懒加载的方式

 {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
  }

login.vue 跳转成功

如果没显示出来，可能要重新启动项目

添加初始样式：

居中方式：

.center {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

编写Login.vue

template中

 <div class="login-box">
        <div class="login-input-box center">
            <h1>信贷管理系统</h1>
        </div>
    </div>

script样式
设置宽、高、像素值尽可能是双数，背景图片、

.login-input-box {
  width: 650px;
  height: 320px;
}
.login-box {
  height: 100%;
  background: url(../assets/bg2.jpg);
  background-size: cover;
  }

background-size: cover 按照背景撑满
background-size: contain 按照图片撑满

App.vue
App.vue是Vue的入口，在App.vue中调用其他页面
template删掉

 <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
 
  </div>

style删掉

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

app是显示的页面，app在main.js中渲染了？不是很懂

检查元素可以知道，body有8px的margin，要去掉，所以引入全局样式

全局样式都写在main.js 中

import './assets/normalize.css';

给login-input-box添加文本居中，白色背景图片

 background: #fff;
 text-align: center;

style样式调整

  padding: 40px 40px 12px 12px;

完整引入element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

自定义的样式一般放在他的下面
添加表单，
v-model可以数据绑定，输入框的数据发生变化，ruleForm下的username也会发生变化

<el-form ref="ruleForm" class="demo-ruleForm" :rules="rules" label-width="100px">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input v-model="ruleForm.pass" type="password"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
 </el-form>

script中添加data

   data() {
        return {
            ruleForm: {
                username: 'aa',
                pass: 'xxx'
            },
        }
    },

return里面添加rules

      rules: {
                pass: [
                    { required: true, trigger: 'blur',message:'请输入密码' }
                ],
                username: [
                    { required: true, trigger: 'blur',message:"请输入用户名" }
                ],
            }

没有message属性的话，默认提示的是英文
添加输入框的背景颜色：用了scss的 ::v-deep

::v-deep .el-input__inner{
    background-color: #f1f1f1;

}

vscode的快捷键
==========开始写登录流程

module的自动化引入

const modulesFn = require.context('./modules',true,/\.js$/); const regex = /.*\(.*)\.js$/ //正则匹配

const modules = {};

//modulesFn.key() 可以获取到上述满足条件的文件加载路径
 modulesFn.keys().forEach(filepath => {   console.log(filepath);  
  let moduleName = regex.exec(filepath);   
  if(moduleName !== null) {
    moduleName = moduleName[1]   }   
    const moduleObj = modulesFn(filepath);   
    modules[moduleName] = {
    namespaced:true,
    ...moduleObj.default 
      } })

 modules: modules

数据导入到vuex中