效果展示

## 涉及要点

  • 请求接口使用axios,在main.js全局配置，并使用拦截器，引入Nprogress时间加载进度条的效果 
// 配置axios请求路径
axios.defaults.baseURL = ''
axios.interceptors.request.use(config => {
   
  Nprogress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
axios.interceptors.response.use(config => {
   
  Nprogress.done()
  return config
})
Vue.prototype.$http = axios
  • 使用filter过滤器，对时间数字进行格式化处理 
Vue.filter('dateFormat', function (originVal) {
   
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${
     y}-${
     m}-${
     d} ${
     hh}:${
     mm}:${
     ss}`
})
  • 富文本编辑器使用vue-quill-editor 
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

项目源码

https://gitee.com/tao-yuhan/shop-item.git

使用了9个分支进行操作，不同分支对应不同的功能