[超详细]SpringBoot+MyBatisPlus+Vue 前后端分离项目实现登录注册-前端篇

后端搭建博客路径：后端搭建博客

1.使用WebStorm创建一个空项目

创建一个名为vuedemo的空项目

创建Vue项目
在Terminal下输入

cd …

vue create vuedemo

然后选择Overwrite

然后选择Default < [ Vue 2] babel, eslint >

2.安装插件

安装element-ui

npm i element-ui -S

安装vue-router

npm install vue-router

安装axios

npm install axios

安装Vuex

npm install vuex --save

安装 sass-loader 依赖和 less 加载组件：

npm i sass-loader --save-dev

npm i less-loader --save-dev

npm i element-ui -S
npm install vue-router
npm install axios
npm install vuex --save
npm i sass-loader --save-dev
npm i less-loader --save-dev

3.router 路由映射

在src目录下新建router文件夹，在router文件夹下新建index.js文件

index.js 代码

//导入 vue-index
import Router from 'vue-router'
import Vue from 'vue'
import login from '../views/login'
import register from '../views/register'


Vue.use(Router)

const routes = [
  {
    path: '',
    redirect: '/login',
  },
  {
    path: '/login',
    component: login,
    meta:{
      title:'登录'
    }
  },
  {
    path: '/register',
    component: register,
    meta:{
      title:'注册'
    }
  },
]

//2.创建vue-router对象
const index = new Router({
  routes,
  mode : 'history'
})

export default index

4.登录注册界面

在src文件夹下新建view文件夹，在view文件夹下新建 login.vue 和 register.vue文件

login.vue

register.vue

5.修改App.vue

App.vue

6.修改main.js

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.prototype.axios=axios;

new Vue({
  el: '#app',
  router,
  axios,
  render: h => h(App)
})

然后再控制台输入 npm run serve 就可以进行测试