对项目httpmmail总结

首先得新建个项目 npm run webpack (项目名)
其次在配置基础选项为接下来所写的项目做准备
也需要引用第三方插件 比如 ：element-ui 封装axios
element-ui
在src目录下的utils文件中创建element.js文件,在里面导入局部引入
import Vue from ‘vue’;
然后在main.js中挂载element-ui
import ‘./utils/element’

封装axios
cnpm i axios -S
在根目录下新建文件夹utlis 在utlis里新建req.js
先引入axios import axios from “axios”
创建实例以及请求拦截和相应拦截

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 添加请求拦截器
instance .interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance .interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }

export  {instance }

再在utils里面新建一个http.js 用来存放需要请求的所有数据接口

先引入 import {http} from "./req.js"

export const loginInfo=(obj)=>http({
    url:"http/user/login.do",
    method:"post",
    params:obj
})

以此方式来获取所需要的接口实现数据

接下来就是要写到所分配的路由 一级路由 以及在一级路由下生成的二级路由
登录页面需要设置登录鉴权 如果没有就不允许访问整个项目
分页器通过 子传父 父传子 进行相互的使用 从而实现效果
富文本编辑器quill-editor的使用
引入 ：cnpm install vue-quill-editor --save
在全局main.js 引入样式 import VueQuillEditor from ‘vue-quill-editor’
import ‘quill/dist/quill.core.css’
import ‘quill/dist/quill.snow.css’
import ‘quill/dist/quill.bubble.css’

Vue.use(VueQuillEditor)
以上引入 缺一不可

文件上传使用element ui 组件里的upload上传 会容易的很多
通过 slot 你可以传入自定义的上传按钮类型和文字提示。
可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。
可通过设置before-remove来阻止文件移除操作。

点击上传

只能上传jpg/png文件，且不超过500kb

以上就是我的总结 谢谢