商品汇 ---day6

登录注册页面:

注册会把数据交给后台,

登录业务:

1. 先注册-- 数据库存储用户信息(名字, 密码)

2. 登录成功-- 服务器发token, 用来区分用户(是唯一的)

此时, 后面可以根据token向服务器请求数据

vuex存储不是持久化(刷新之后就没有数据了)

---

持久化存储: 本地存储

---

导航守卫:

全局前置路由守卫: 初始化的时候被调用,每次路由切换之前被调用.

router.beforeEach((to, from, next) => {
    })

to: 去往路由组件

from: 来的组件

next: 放行函数

全局后置路由守卫: 初始时执行, 路由切换后执行.

router.afterEach((to, from) => {
})

---

提交按钮时, 还需要向服务器发请求, 需要将支付信息交给服务器,将带有参数发送请求.

不用vuex发送请求, 可以在main.js中引入所有请求函数, 并且写入原型对象中.

---

antd 有vue和react[PC端]

antd-mobile[移动端]

Vue: ElementUI[PC端]   

vant:[移动端]

---

使用elementUI:

1. 安装: cnpm install --save element-ui

2. 引入( 全部引入和按需引入) :

        @1. 全部引入:

完整引入

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

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

Vue.use(ElementUI);

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

        @2. 按需引入:

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babel.config.js 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

3. 使用

 ---

该插件对elementui数据有提示.