成品动画演示：?

具体步骤较多，一下午功夫吧！入门vue嘻嘻~ ?

正文

一、router路由配置

1.1 创建项目

vue脚手架项目

1. 到工程目录下打开cmd，输入以下命令行，生成vue脚手架工程

   $ vue init webpack Vue_Springboot

2. 接下来根据提示输入工程的信息
   vue-router需要安装，作为入门，我们选择不安装ESLint和所有测试工具

   ? Project name vue_springboot
   ? Project description A Vue.js project
   ? Author your name
   ? Vue build standalone
   ? Install vue-router? Yes
   ? Use ESLint to lint your code? No
   ? Set up unit tests No
   ? Setup e2e tests with Nightwatch? No
   ? Should we runnpm install for you after the project has been created? (recommended) npm

3. 脚手架工程安装完成后就可以用编译工具打开文件夹Vue_Springboot我是用的HBuilder），目录如下，编程都在src目录下进行 （这是我全部创建完成后的目录，参照位置 创建和修改）
   

1.2 router路由配置

1. 先在目录src/components/ 下创建两个空文件Main.vue和Login.vue

2. 创建工程时，会自动导入vue-router，不用手动创建的；
   若没有自动导入，则打开cmd在Vue_Springboot目录下安装包如下

   cnpm intall vue-router

3. 修改src/router/ 下创建index.js文件(仿照helloworld写路由)

   import Vuefrom'vue'import Routerfrom'vue-router'import HelloWorldfrom'@/components/HelloWorld'import Mainfrom'@/components/Main.vue'//【引入Main.vue模块,重命名为Main】import Loginfrom'@/components/Login.vue'
   
   Vue.use(Router)//注册vue-routerexportdefaultnewRouter({
     routes:[{
         path:'/',// 【路径】
         name:'Main',// 【名字】，推荐，因为路径可能会改动，而 name 不会
         component: Main// 设置导向的【组件】页面,在上方import的重命名},{
         path:'/login',
         name:'Login',
         component: Login},]})

4. 在main.js中引入前面的配置的路由

   import Vuefrom'vue'import Appfrom'./App'import routerfrom'./router'//引入【路由配置】,其中“./router”特指router下index.js
   
   Vue.config.productionTip=falsenewVue({
     el:'#app',
     router,// 调用，等价于 router: router
     components:{ App},
     template:'<App/>'})

5. 路由就设置成功了，接下来修改App.vue,Main.vue和Login.vue的代码

   • App.vue：删去了多余的样式

     <template><divid="app"><imgsrc="./assets/logo.png"><router-view/><!-- 路由注入的地方 --></div></template><script>exportdefault{
       name:'App'}</script><style></style>

   • Main.vue：首页，点击文字，url路径跳转到登录页面

     <template><div><h1>主页面</h1>
             欢迎!<b@click="login">点这里登录</b></div></template><script>exportdefault{
             methods:{login(){this.$router.replace('/login')}}}</script>

   • Login.vue：简单的登录界面，如果登陆成功（这里没有其他页面，暂时返回首页）

     <template><div><h1>登录界面</h1>
             用户名：<Input/><br/>
             密码：<Input/><br/><button@click="login">登录</button></div></template><script>exportdefault{
             methods:{login(){this.$router.replace('/')}}}</script>

1.3 router测试 ?

1. 路由模块运行
   输入cnpm run dev启动项目,热启动，边修改边响应
2. 浏览器请求本地端口（点击登录实现页面切换，即router路由配置成功）
   

二、element优化前端

2.1 引入element

引入Element框架对界面进行美化，并对表单添加基础的验证功能

1. 打开cmd在Vue_Springboot目录下安装包如下

   cnpm install element-ui -S

2. 创建目录src/element/ ，并创建文件index.js
   

3. 修改index.js

   import Vuefrom'vue'import ElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(ElementUI)

4. 然后在全局配置main.js中添加以下代码进行引入element

   import'./element'//引入样式

2.2 修改整体布局

对App.vue进行修改

<template><divid="app"><el-container><!-- 头部区域 --><el-headerclass="header"height="100px"><h2>Vue登录模块</h2><h4>路 由 配 置 登 录 跳 转</h4></el-header><!-- 主区域 --><el-main><router-view/><!-- 路由注入的地方 --></el-main></el-container></div></template><script>exportdefault{
  name:'App'}</script><style>.header{background-color: #409EFF;color: white;}</style>

2.3 修改登录布局

Login.vue:前端样式判断提交不能为空，提交内容判断

<!--基本html代码区域--><template><divclass="logindemo"><el-formref="form":model="user":rules="rules"status-iconlabel-width="100px"><el-rowtype="flex"justify="center"><el-col:span="5"><el-form-itemlabel-width="70px"><span><fontcolor="#B3D8FF"size="5">注册登录页面</font></span></el-form-item></el-col></el-row><el-rowtype="flex"justify="center"><el-col:span="5"><el-form-itemlabel="账户："prop="name"><el-inputv-model="user.name"size="small"></el-input></el-form-item></el-col></el-row><el-rowtype="flex"justify="center"><el-col:span="5"><el-form-itemlabel="密码："prop="password"><el-inputv-model="user.password"size="small"></el-input></el-form-item></el-col></el-row><el-rowtype="flex"justify="center"><el-col:span="5"><el-form-item><el-buttontype="primary"@click="submit">登录</el-button><el-button@click="register">注册</el-button></el-form-item></el-col></el-row><el-rowtype="flex"justify="center"><fontcolor="pink"size="3">1.账户admin，密码123，登录<br>2.点击注册返回主页</font></el-row></el-form></div></template><!--数据存贮交互，事件控制地区--><script>exportdefault{
    name:'logindemo',data(){return{
        user:{},
        rules:{
          name:[{
            required:true,
            message:'用户名不能为空',
            trigger:'blur'}],
          password:[{
            required:true,
            message:'密码不能为空',
            trigger:'blur'}],},}},
    methods:{/*提交进行判断的函数 */
      submit:function(){if(this.user.name==='admin'&&this.user.password==='123'){this.$notify({
            type:'success',
            message:'欢迎你,'+this.user.name+'!',
            duration:3000})this.$router.replace('/')}else{this.$message({
            type:'error',
            message:'用户名或密码错误',
            showClose:true})}},
      register:function(){this.$router.replace('/')//返回主页},},}</script><!-- 写样式的地方 --><stylescoped></style>

2.4 登录验证测试 ?

1. 验证是否为空：（mode模型user，传回user.name和user.password）
   :model 是传过来的一个对象
:rules="rules" 是动态绑定的rules，表单验证规则
status-icon是符号提示

   <divclass="logindemo"><el-formref="form":model="user":rules="rules"status-iconlabel-width="100px"><el-form-itemlabel="账户："prop="name"></el-form-item><el-form-itemlabel="密码："prop="password"></el-form-item></el-form></div>

   

2. 登录验证：
   
   
   主要就是submit()函数+if else判断，这里多加了2个提示弹窗；
   判断依据 if（this.mode.content）mode对应data里的user模型，对应user的各个属性判断。
   
   

2.5 优化vue-method表单验证

tips:其中submit函数可以优化图2写法：


这样的好处：

1. 首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form;
2. 其次在拿到了正确的form后，检查该form上添加的表单验证是否正确。

Login.vue优化后的全部代码：

<script>exportdefault{
    name:'logindemo',data(){return{
        user:{},
        rules:{
          name:[{
            required:true,
            message:'用户名不能为空',
            trigger:'blur'}],
          password:[{
            required:true,
            message:'密码不能为空',
            trigger:'blur'}],},}},
    methods:{/*提交进行判断的函数 */// submit: function() {//   if (this.user.name === 'admin' && this.user.password === '123') {//     this.$notify({//       type: 'success',//       message: '欢迎你,' + this.user.name + '!',//       duration: 3000//     })//     this.$router.replace('/')//   } else {//     this.$message({//       type: 'error',//       message: '用户名或密码错误',//       showClose: true//     })//   }// },submit(){this.$refs.form.validate((valid)=>{//form是el-form 标签中ref="form"名称if(valid){if(this.user.name==='admin'&&this.user.password==='123'){this.$notify({
                type:'success',
                message:'欢迎你,'+this.user.name+'!',
                duration:3000})this.$router.replace('/')}else{this.$message({
                type:'error',
                message:'用户名或密码错误',
                showClose:true})}}else{returnfalse}})},
      register:function(){this.$router.replace('/')//返回主页},},}</script>

三、Vuex管理全局数据

3.1 引入Vuex

1. 引入Vuex

   cnpm install vuex

2. 创建目录src/vuex/ ，并创建index.js文件
   

   import Vuefrom'vue'import Vuexfrom'vuex'
   
   Vue.use(Vuex)const store=newVuex.Store({// 全局变量
       state:{
           user: undefined},// 修改全局变量必须通过mutations中的方法// mutations只能采用同步方法
       mutations:{login(state, payload){//全局login函数
               state.user= payload//这里有缓存，在下一个页面可以继续调用user对象},logout(state){
               state.user= undefined//清楚缓存}},// 异步方法用actions// actions不能直接修改全局变量，需要调用commit方法来触发mutation中的方法
       actions:{login(context, payload){
               context.commit('login', payload