.net vue漂亮登录界面_暴力学前端 1 第一个页面: 登录页面

在准备篇中，我们让 vue-element-admin 这个项目成功的运行起来了，并且我们初步的探索了一下，得出了如下的结论:

1. 运行该项目需要 nodejs 的“加持”；
2. 项目的依赖包都在 package.json 文件中指明；
3. 执行 npm install 就是安装 package.json 文件中指明的那些依赖包
4. 执行 npm run dev/serve 可以让这个项目"跑起来"

我们知道学习一个新的领域最有效的方法就是模仿，但肯定不是照抄一遍，这样既学不到新的东西，又浪费时间(并且在你抄写的过程中，你的思绪不知道飞到了哪里去了)。那么，我们从哪里开始模仿呢？

既然启动了这个项目后第一个页面即是登录页面，我们就从这个登录页面开始模仿。但我们不会在原项目得基础上再抄写一个登录页面，而是先创建一个我们自己的项目(不妨取名"math-share")，然后在这个项目中添加登录页面。

创建 math-share 项目

在这里我们使用 vue 脚手架工具生成一个项目，它是一个模板项目，我们可以在这个基础模板上进行开发。但首先，我们需要安装 vue 脚手架工具。

1.右键 开始->以管理员身份运行 powershell ,输入如下命令

npm install -g @vue/cli

选项 -g 表示全局安装，这样当我们再生成一个项目时就不需要重新安装它了。

2.现在我们创建 math-share 项目。首先，创建一个目录 MyApp，进入该目录，按住 shift 键右击鼠标，打开powershell窗口:

输入命令:

vue create math-share

我们可以看到在第一个选项 template 模板包含 vue-router、vuex、less等特性(先不去深究这些特性到底是什么意思)，也可以使用上下键切换选项选择 Manually select features(自定义模式选择某些特性)。这里我们就选择默认模板，直接点击 enter 键，安装完成之后:

3.现在我们可以使用 vscode 打开这个目录了:

我们得到了一个与 vue-element-admin 类似的目录结构了。

至此，创建 math-share 项目还缺少一个重要的步骤。我们看 vue-element-admin 官方说明:

vue-element-admin是一个后台前端解决方案，它基于vue和element-ui实现。

math-share 已经是"基于 vue"的了，我们再让它 "基于 element-ui"。首先 element-ui是什么东西? 通过查看官网：

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

原来它就是一个桌面端组件库。现在我们让 math-share 项目 "基于 element-ui"。

我们直接在 vscode 的终端中输入命令:

cd my-app
vue add element

这里直接按 enter 键选择 "Fully import"，接下来出现的 "Do you wish to overwrite Element's SCSS variables?"不知道是个啥意思，直接按 enter 键(默认选择No)，之后选择语言为 en:

现在，创建 math-share项目的步骤就完成了。在vscode终端中输入命令行:

npm run serve

我们就把我们的 math-share 项目运行起来了：

此时就可以在浏览器中看到默认页面了：

现在我们终于可以开始写第一个登录页面了。

登录页面写在哪儿？

对于我们的 math-share 项目，我们把登录页面写在哪儿呢？回答这个问题并不困难，我们找到 vue-element-admin 的登录页面的位置，然后把我们的登录页面写在对应的相同位置就可以了。但对于我这个菜鸟来说，我只知道 vue-element-admin 有一个登录页面，但我并知道它在哪儿。那我们就不妨暴力一点，直接在 vscode 的侧边栏的搜索功能中输入关键字 "login"，可以看到结果:

我们看到 "srcviewslogin" 比较像是 vue-element-admin 的登录界面，打开看一下:

我们看到了 username 、password 这些字符串，再往下拖动，又看到了:

刚好与界面上的保持一致:

这样我们就确定了 "srcviewsloginindex.vue" 是登录页面。

接下来，我们创建相同的目录结构，并在目录下添加 index.vue 文件：

vue 与 WPF 的对比

在仿写之前，我们先从宏观上分析一下 vue-element-admin(以后简写为 "vea")的登录页面 index.vue。首先，index.vue 具有如下的结构:

<

再稍微扫一眼各个顶级标签内的内容，我们就知道<template>标签内是 html 元素，是登录界面的骨架，而<style>标签显然就是应用在<template>各个元素的样式了，<script>中的内容显然就是 javaScript 脚本。

我们知道 vue 的内部思想是 MVVM，如果你曾经开发过WPF程序，应该对MVVM很熟悉了。既然两者都是基于MVVM的模式，那么 WPF 和 vue 肯定有其相似之处。

我们对比一下 WPF 的 login.xaml(假设有一个叫做 login.xaml的窗体) 和 index.vue，不难发现，login.xaml 对应于 <template> 和 <style> 中的部分，它们代表 MVVM 中 V 的部分；而 LoginViewModel.cs 对应于 <script> 标签中的部分，它们代表MVVM中 VM 部分。在 WPF 中，我们一般把 View 和 ViewModel 分作两个目录，也就说 View 和 ViewModel 一般不在同一个文件中，而在 index.vue 中，我们看到 V 和 VM 是位于同一个文件中的。

登录页面编码

既然明白了 vue 文件的基本组成以及其体现的 MVVM 思想，我们可以依葫芦画瓢开始写我们自己的 index.vue 的页面了，这里仿写的原则是尽可能地忽略掉那些陌生或不熟悉的属性和元素，这样我们就得到了一个最基本的登录页面:

<template>
  <div class="login-container">
    <el-form>

      <div class="title-container">
        <h3 class="title">LOGIN FORM</h3>
      </div>

      <el-form-item>
        <span class="svg-container">
          <svg-icon icon-class="user"/>
        </span>
        <el-input
          placeholder="Username"
          type="text"
        />
      </el-form-item>

      <el-form-item>
        <span class="svg-container">
          <svg-icon icon-class="password"/>
        </span>
        <el-input
          placeholder="Password"
        />
      </el-form-item>

      <el-button>Login</el-button>

    </el-form>
  </div>
</template>

虽然我们为 math-share 项目添加了登录界面，但此时 math-share 站点默认的首页是创建 math-share 项目时生成的默认页面。我们根据界面上展示的内容利用搜索功能发现其默认页面就是 App.vue。那它在哪儿使用呢？再次搜索 App.vue 我们发现:

打开 main.js 文件：

import 

不难知道，这里以类似于c#中引用的方式

using 

引用了 Vue:

import 

然后在下面的代码中使用 App

new 

那么我们以同样的方式引入我们刚才编写的登录页面:

import 

注意，引用 Login 时没有具体到 "./views/login/index.vue"，可能是一种约定吧。

保存后，刷新页面：

这样，我们就成功地编写了我们的第一个登录页面。

下一篇我们研究一下登录页面的其他部分。