打开Vue CLI图形管理界面。

启动后，在浏览器地址栏中输入地址：http://localhost:8000。打开图形管理界面。

点击“在此创建新项目”，在项目文件夹中输入项目名（Vue项目好像只支持小写）。项目名填写完毕后。在下方查看是否需要初始化Git仓库。点击下一步。

进入到项目预设的位置，我在这里选择手动。点击下一步。

进入选择功能的界面。这里需要打开的选项有这几个：

1. Babel
2. Router
3. 使用配置文件

(这里Linter/Formatter是一个检验语法格式的一个功能，默认是选中的，但是对于新手可以关闭，一些格式上的错误它也会报错而导致项目无法运行。根据自身情况选择安装。)

点击下一步之后进入配置页面，点击页面下方的“创建项目”。系统会提示是否需要保存为新预设。

这里按照自己的习惯进行选择。我在这里选择了不保存预设。

等待一会后，可以在这里看到项目创建完毕。

这里开发时用到了组件库Element-UI。

点击项目仪表盘左侧的插件。

查找vue-cli-plugin-element。安装该插件。

安装后，会提示配置插件。在这里我们选择按需导入“Import on demand”

安装依赖。点击项目仪表盘左侧导航栏的依赖，再点击右侧的安装依赖。

这里安装一下axios的库。搜索axios，选中后，点击下方安装axios。

再搜索两个依赖，分别是 less 和 less-loader

打开Vue脚手架工具，到项目仪表盘中找到左侧导航栏中的任务，再选择serve，最后点击运行来启动项目。

打开浏览器，在地址栏输入地址：http://localhost:8080，打开刚刚创建的项目。如下图所示。

打开目录下的App.vue文件。删除页面上的内容。修改后的代码如下：

<template>
  <div id="app">
    根组件
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>

</style>

文件结构：

1. <template></template>标签中写HTML代码。
2. <script></script>标签中写JS代码。
3. <style></style>标签中写CSS。

保存文件修改后，到浏览器中查看页面。如下所示。

找到项目文件夹下的router\index.js文件并打开。看到如下代码。

将红框圈出的代码删除。删除后的代码如下所示。

router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
  routes
})

export default router

保存修改后的文件。

接着删除以下几个文件。

1. components\HelloWorld.vue
2. views\Home.vue
3. views\About.vue

重新回到浏览器的页面，可以看到网页没有变化，则说明修改没有问题。

在views文件夹下创建登录组件：Login.vue。

Login.vue

<template>
    <div>
        登录组件
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>

</style>

找到router\index.js文件夹下，配置刚才创建的Login.vue的路由。

首先导入刚才创建的Login组件。

在routes下配置路由。

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

再配置一个路由重定向，默认指向Login组件。

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

router\index.js 完整代码如下：

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

打开App.vue文件。在<template></template>标签下的<div id="app"></div>标签下，输入路由占位符。

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>

</style>

打开浏览器，在地址栏输入地址: http://localhost:8080，看到如下页面。

将Login.vue中的代码按如下修改。

添加class，并且修改背景颜色。

<template>
    <div class="login-container">
        登录组件
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>
.login-container {
    background-color: #2b4b6b;
}
</style>

保存后打开浏览器，看到如下界面。

从界面上可以看到，只有登录组件那一行的背景颜色进行了修改。我想要的效果是整个界面都修改了背景颜色。

到assets文件夹下创建css文件夹，在这个文件夹下，创建global.css。

global.css

/* 全局样式表 */
html, body, #app {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

再到main.js文件下，导入刚才创建的全局样式。

// 导入全局样式表
import './assets/css/global.css'

再回到Login.vue文件中，在login-container的css样式下添加 height: 100%;

保存修改后，到浏览器中可以看到Login组件的背景颜色撑满了整个界面。

下面写一下登录信息输入框。这边引用了Element-ui组件库。

看一下此时Login.vue的完整代码。

<template>
    <div class="login-container">
        <div class="login-box">
            <div class="login-title">AccountBook</div>
            <div class="login-form">
                <el-input v-model="username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
                <el-input v-model="password" prefix-icon="el-icon-lock" placeholder="请输入密码" type="password"></el-input>
                <div class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            username: '',   // 用户名
            password: '',   // 密码
        }
    }
}
</script>

<style lang="less" scoped>
/* 登录界面 */
.login-container {
    background-color: #2b4b6b;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 登录框 */
.login-box {
    width: 500px;
    height: 280px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px #A9A9A9;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/* 登录标题 */
.login-title {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #606266;
    font-size: 20px;
}

/* 登录表单 */
.login-form {
    width: 80%;
}

/* 输入框 */
.el-input {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* 按钮行 */
.btns {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 15px;
}
</style>

运行效果如下所示。

在重置按钮中添加click事件。

在js代码中，添加methods：{}，其中添加reset方法。

methods: {
    // 重置登录框
    reset: function() {
        this.username = ''
        this.password = ''
    },
}

给登录按钮添加click事件

在methods中添加login函数。

 // 登录
 login: async function() {
     // 判断信息是否填写完整
     if (this.username == '' || this.password == '') {
         if (this.username == '' && this.password == '') {
             this.$message.warning('请输入用户名和密码')
             return
         }
         if (this.username == '') {
             this.$message.warning('请输入用户名')
             return
         }
         if (this.password == '') {
             this.$message.warning('请输入密码')
         }
     }

     // 信息输入完整
     let result = await this.$myFunction.axiosPost('api/ABUser/Login', {
         Username: this.username,
         Password: this.password
     })

     // 服务器出错
     if (!result.Success) {
         this.$message.warning(result.ErrorMessage)
         return
     }

     // 未查询到用户信息
     if (result.ResultData == null) {
         this.$message.warning('用户名或密码错误')
         return
     }

     // 成功登录
     // 将用户UserId存入sessionStorage
     window.sessionStorage.setItem('userId', result.ResultData.Id)
     window.sessionStorage.setItem('nickname', result.ResultData.Nickname)

     // 跳转到Home页面
     this.$router.push({name: 'home'})
 }

找到router\index.js文件

添加如下代码：

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //   next() 放行，next('/login')强制跳转
  if (to.path == '/Login') return next()

  // 获取用户Id
  const userId= window.sessionStorage.getItem('userId')
  // 用户Id为空时自动转向登录页面
  if (userId == null || userId == '') {
      return next('/Login')
  }
  next()
})

（最后更新于：2020-06-24）