电商管理系统（Element-UI）vue项目基本笔记

电商管理系统（Element-UI）vue项目基本笔记

1.初始化项目

 vue init webpack vueshop

配置ElementUI 组件库

ElementUI

npm i element-ui -S

main.js

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

Vue.use(ElementUI);

按需导入

首先，安装babel-plugin-component：

npm install babel-plugin-component -D

然后，将.babelrc修改为：

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

新建 src/plugins/element.js

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message = Message

main.js

import './plugins/element.js'

配置axios

axios

npm install axios -s

配置预处理器less

sass
less

npm install less less-loader --save-dev

npm install less less-loader@5 --save //指定较低版本的less-loader下载2.x不支持高版本

坑：Vue使用less报错的解决方法

2.实现登录功能

登录状态保持

如果服务器和客户端同源，建议可以使用cookie或者session来保持登录状态
如果客户端和服务器跨域了，建议使用token进行维持登录状态。

登录逻辑

在登录页面输入账号和密码进行登录，将数据发送给服务器
服务器返回登录的结果，登录成功则返回数据中带有token
客户端得到token并进行保存，后续的请求都需要将此token发送给服务器，服务器会验证token以保证用户身份。

配置路由

在router.js中导入组件并设置规则
在App.vue中添加路由占位符

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }
  ]
})

全局样式

然后需要添加公共样式，在assets文件夹下面添加css文件夹，创建global.css文件,添加全局样式

/* 全局样式表 */
html,body,#app{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; 
}

在main.js中导入global.css，使得全局样式生效
import "./assets/css/global.css"