mall1

image.png

ENV = 'development'

VUE_APP_BASE_API = 'http://itfly.vip:8888'

  ENV = 'production'

  VUE_APP_BASE_API = 'http://itfly.vip:8888'

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5
          })
        ]
      }
    }
  },
  devServer: {
    // proxy: {
    //   '/api': {
    //     target: 'https://yys.res.netease.com', // 目标地址
    //     ws: true, /// / 是否启用websockets
    //     changeOrigin: true, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
    //     pathRewrite: { '^/api': '/' } // 这里重写路径
    //   }
    // }
    before(app) {
      app.get('/api', (req, res) => {
        res.send(require('./mock/data.json'))
      })
    }
  }
}

package.json

{
  "name": "vue-mall-phone-2105",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:prod": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.23.0",
    "core-js": "^3.6.5",
    "lib-flexible": "^0.3.2",
    "moment": "^2.29.1",
    "nprogress": "^0.2.0",
    "postcss-px2rem": "^0.3.0",
    "vant": "^2.0.5",
    "vue": "^2.6.11",
    "vue-router": "^3.5.2",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-vuex": "^4.5.14",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.8.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^9.0.3",
    "vue-cli-plugin-route": "0.0.7",
    "vue-cli-plugin-vant": "~1.0.1",
    "vue-template-compiler": "^2.6.11"
  }
}

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

eslink

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 0,
    'eol-last': 0,
    'no-multiple-empty-lines': 0
  }
}

image.png

image.png

api
goods

import request from '../utils/request'

export const getGoods = ({ page, limit }) => {
  return request({
    method: 'get',
    // eslint-disable-next-line quotes
    url: `/api/getgoods?pageindex=${page}&limit=${limit}`
  })
}

export const getGoodsInfo = id => {
  return request({
    method: 'get',
    url: '/api/goods/getinfo/' + id
  })
}

home

import request from '../utils/request'

export const getLunbo = () => {
  return request({
    method: 'get',
    url: '/api/getlunbo'
  })
}

export const getGrids = () => {
  return request({
    method: 'get',
    url: '/api/grids'
  })
}

news

import request from '../utils/request'

export const getNewsList = () => {
  return request({
    method: 'get',
    url: '/api/getnewslist'
  })
}
export const getNewsInfo = id => {
  return request({
    method: 'get',
    url: '/api/getnew/' + id
  })
}


export const getComments = ({ id, pageNo, pageSize }) => {
  return request({
    method: 'get',
    // eslint-disable-next-line quotes
    url: `/api/getcomments/${id}?pageindex=${pageNo}&limit=${pageSize}`
  })
}
export const postComments = ({ id, content }) => {
  return request({
    method: 'post',
    url: '/api/postcomment/' + id,
    data: {
      content
    }
  })
}

photos

import request from '../utils/request'

export const getImageCategory = () => {
  return request({
    method: 'get',
    url: '/api/getimgcategory'
  })
}

export const getImages = id => {
  return request({
    method: 'get',
    url: '/api/getimages/' + id
  })
}


export const getImageInfo = id => {
  return request({
    method: 'get',
    url: '/api/getimageInfo/' + id
  })
}

export const getThumImages = id => {
  return request({
    method: 'get',
    url: '/api/getthumimages/' + id
  })
}

components comment

swiper

diretives

import Vue from 'vue'

Vue.directive('price', {
  inserted(el, binding) {
    console.log(el)
    el.textContent = binding.value + el.textContent
  }
})

// export default function (Vue) {
//   Vue.directive('price', {
//     inserted(el, binding) {
//       el.textContent = binding.value + el.textContent + '元'
//     }
//   })
// }

filters

import Vue from 'vue'
import moment from 'moment'

Vue.filter('datefmt', arg => {
  return moment(arg).format('YYYY-MM-DD HH:mm:ss')
})

mixins

// export default {
//   created() {
//     console.log('mixins created')
//   },
//   methods: {
//     goDetail(url, id) {
//       this.$router.push(url + '/' + id)
//     }
//   }
// }

import Vue from 'vue'

// 全局混入 容易变量 重复
Vue.mixin({
  methods: {
    goDetail(url, id) {
      this.$router.push(url + '/' + id)
    }
  }
})