微人事项目学习之登陆页面制作(一)

学习SpringBoot+Vue前后端分离项目，原项目GitHub地址，项目作者江雨一点雨博客。

创建项目

创建该项目时采用的vue-cli4，可以在vue官网安装教程中下载安装。
可以使用命令行创建然后在webstorm中导入项目，也可以直接用webstorm创建vue项目，webstorm实际上也是调用的命令行创建项目。项目创建时选择插件选择babel和router这两个插件。
注意事项：项目创建完成后，找到工程目录中的src/router包中的index.js文件（使用cli3创建的直接在总目录下找router.js），检查该文件中路由模式是否为hash模式，如果为history模式可能会导致404，需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
})

如上面所示，如果mode后面的值为’history’，改为’hash’即可

引入Element-UI

该项目前端中采用的Element-UI，使用前需先安装
在命令行中输入：

npm i element-ui -S

安装完成后可以在package.json中找到element-ui已经添加进来了

"dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "element-ui": "^2.13.0",
    "font-awesome": "^4.7.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "vuex": "^3.1.2"
  },

然后在main.js中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

测试登录页面

将App.vue中的默认代码删除只保留router-view

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

在src/views中创建登录页面Login.vue，在template中写上div以便后面测试

<template>
    <div>
     login
    </div>
</template>

回到路由文件router/index.js中将Login.vue的路由添加进来(很重要！！！)

import Login from '../views/Login.vue'//vue-cli4

这里注意一下地址中有两个点，意思是当前目录的上一级，比如说vue-cli4下创建的项目路由文件是src/router/index.js 我们的登录页面是src/views/Login.vue
所以需要从router往上一级变为src，然后再往下找到views，再找到Login.vue。
同理，如果是vue-cli3创建的路由文件直接在src目录下，直接找到views就行了，
一个点就代表当前目录
代码如下：

import Login from './views/Login.vue'//vue-cli3 

然后在下面配置路径

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

启动项目，在默认端口8080上看到了login，此时注意到如果路由模式是hash模式会多个 #，history模式则没有。