vue+element-ui+leancloud项目初始化

目的：使用vue+element-ui+leancloud建立一个可以登陆的系统

一、使用vue-cli3创建一个新的项目

vue create <app-name>

选择手动配置，选择Router

删去不需要的组件并建立api、views文件夹

文件结构

二、安装element-ui

npm i element-ui -S

在main.js中写入

import ElementUI from 'element-ui';

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

Vue.use(ElementUI)

三、安装leancloud

首先我们需要在leancloud控制台创建一个新的应用

接着在控制台>设置>应用Keys中找到你的服务器地址并复制，进入控制台>设置>域名绑定，将API访问地址和你的服务器地址进行绑定，否则会出现跨域请求失败问题。

在项目中安装leancloud，使用存储服务即可

npm install npm install leancloud-storage --save

在进行初始化前，进入控制台>设置>应用Keys获取你的App Id、App Key和服务器地址

在main.js中写入

import AV from 'leancloud-storage' ;

AV.init({

appId:"your-appid",

appKey:"your-appkey",

serverURL:"your-serverURL"

})；

至此我们已经完成了所需工具的安装

四、构建用户登录系统

首先在leanCloud控制台>存储>用户页面为我们的管理系统添加新用户

接着在api文件夹下新建login.js，添加如下代码使我们可以完成登录/登出功能

login.js

在views文件夹下创建Home.vue和index.vue页面

index页面

Home页面

接着配置路由

路由

接着在index.vue页面（表单验证未展示），我们为其导入api文件夹下的login.js，并为我们的登录按钮添加一个@click事件

@click事件

在Home页面同样导入api文件夹下的login.js，为我们的登出按钮添加一个@click事件

@click事件

再添加一个登录验证，这时我们需要在Home页中引入AV，并用mounted钩子进行检测

打

至此我们的页面就构建完成了，调出终端运行npm run serve

向表单中添加我们在leancloud中添加好的用户及密码即可。