Vhr02

 

1.环境搭建-之前的环境搭建是vue-cli2  现在要安装官网最新版 4.x

  官网地址https://cli.vuejs.org/zh/guide/installation.html

安装前先卸载之前的版本

按照光网进行安装

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

安装vue-cli4.x 命令

因为作者的是3.11.0所有控制版本

npm uninstall vue-cli -g 卸载版本(vue-cli<3)
npm uninstall @vue/cli -g 卸载版本(vue-cli>=3)
npm install -g @vue/cli@3.11.0 安装3.11.0版本,也可以安装最新版，我自己安装3.11.0版本
vue --version 安装完成后查看版本
vue create xxxx 创建一个项目
自定义配置

npm install -g @vue/cli

用vue --version 检测是否安装成功

C:\Users\hp>vue --version
@vue/cli 4.5.11

进入创建项目的文件根目录进行创建项目

vue create vuehr

回车之后会弹出--选择编译工具  选择手动进行编译

选择这几个  空格键选择取消

  2.x
> 3.x (Preview)   

 In dedicated config files
> In package.json 

不保存当前模板

开始创建项目

项目环境依赖已经全部自动下载好了。直接进行运行运行项目

cd vuehr
 $ npm run serve

启动项目进行访问，访问成功页面创建成功

项目创建成功-唯一区别是项目的目录结构更加简洁，其余无差别，相互切换特别容易

------------

开始写前端项目，

前端项目使用https://element.eleme.cn/#/zh-CN/component/quickstart

---安装element环境  进入到项目中

npm i element-ui -S

----在main.js中引入引入环境依赖

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

引入之后

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

写项目代码

 

删除无用代码和页面

1.制作登录页面

登录页面---Login

创建Login登录页面Login.vue

<template>
    <div>
        Login
    </div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>

</style>

router中引入资源

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

运行显示是否成功

 

登陆页代码

<template>
    <div>
        <!--校验规则-->
        <!--class="loginContainer"定义登陆样式-->
        <el-form :rules="rules" :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">系统登录</h3>
            <!--校验属性值username校验用户是否输入-->
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="text" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <!--是否记录密码-->
            <el-checkbox class="loginRemember" v-model="checked"></el-checkbox>
            <!--登陆按钮-->
            <el-button type="primary" style="width: 100%">登陆</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username: 'admin',
                    password: '123456'
                },
                checked: true,
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}]
                }
            }
        }
    }
</script>

<style scoped>
.loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    /*阴影效果*/
    box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
    margin: 15px auto 20px auto;
    text-align: center;
    color: aqua;
}
    .loginRemember{
        text-align: left;
        margin: -2px 0px 15px 0px;
    }
</style>

完整代 首页进行登录验证  

 

<template>
    <div>
        <!--校验规则-->
        <!--class="loginContainer"定义登陆样式-->
        <!--ref="loginFrom"表单的名字-->
        <el-form :rules="rules" ref="loginFrom" :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">系统登录</h3>
            <!--校验属性值username校验用户是否输入-->
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="text" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <!--是否记录密码-->
            <el-checkbox class="loginRemember" v-model="checked"></el-checkbox>
            <!--登陆按钮-->
            <!--登陆点击事件-->
            <el-button type="primary" style="width: 100%" @click="submitLogin">登陆</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username: 'admin',
                    password: '123456'
                },
                checked: true,
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}]
                }
            }
        },
        /*登陆点击事件的处理*/
        methods: {
            submitLogin(){
                /*表单校验 验证是否输入*/
                this.$refs.loginFrom.validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        this.$message.error('请输入用户名和密码！！');
                        return false;
                    }
                });
            }
        }


    }
</script>

<style scoped>
.loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    /*阴影效果*/
    box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
    margin: 15px auto 20px auto;
    text-align: center;
    color: aqua;
}
    .loginRemember{
        text-align: left;
        margin: -2px 0px 15px 0px;
    }
</style>

 前端登陆-模块完成  进行写后端接口