配置的问题

去除8px:
    在 public 文件的 index.html 中设置 margin：0；

    
报错问题：全局找到parserOptions对象中加入

    "requireConfigFile": false

格式化问题：创建  .prettierrc 文件

    { "semi": false, "singleQuote": true, "printWidth": 200 }

在main.js中引入使用：

        import ElementUI from 'element-ui'
        import 'element-ui/lib/theme-chalk/index.css'
        import VueCookies from 'vue-cookies'

        Vue.use(VueCookies, { expires: '7d'})

        Vue.use(ElementUI)

要引入axios的request，request引入api中的文件
要自己建axios文件，api文件

api文件（接口）：##############################################################

import { request } from '@/axios/request.js'

// Post接口
export function getAddcar(data) {
    return request({
      url: '/xiaomi/v2/shoppingCart',
      method: 'POST',
      data,
      headers: { isToken: true }, 
    })
  }   

//Get接口
export function onCarlist(params) {
  return request({
    url: '/xiaomi/v2/shoppingCart',
    method: 'GET',
    params,
    headers: { isToken: true },
  })
}

// URL带参数 和 头部需要 请求数据类型
export function getDetails(productId) {
  return request({
    url: '/xiaomi/v2/product' + productId,
    method: 'GET', 
    headers: {
       // 请求数据类型
       "Content-Type" : "application/x-www-form-urlencoded",
       //是否携带Token
       isToken: true
},
  })
}
axios的request：（下面是引入，baseURL，请求响应拦截）##################################

import axios from 'request'
import VueCookies from 'vue-cookies' 

export function request(config) { 
  // 初始化一个axios 
  const instance = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
  })
  // 拼接请求 baseURl + config.url  /dev-api/xiaomi/v2/carousel
  // 添加请求拦截器
  instance.interceptors.request.use(
    function (config) {
      // 在发送请求之前做些什么，根据接口请求判断是不是要携带Token 
        if (VueCookies.get('token')) {
          config.headers.Authorization = `Bearer ${VueCookies.get('token')}`
        } 
      return config
    },
    function (error) {
      // 对请求错误做些什么
      return Promise.reject(error) 
    }
  )
  // 响应拦截器，报错统一拦截
  // 404--没找到not find 
  // 500--服务器错误，找后端
  // 401--没权限一般没Token
  // 200--成功
  instance.interceptors.response.use(
    function (res) { 
      if (res.data.code === 401) {
        console.log('没权限，别嫌点！')
      } else if (res.data.code === 404) {
        console.log('路径写错了')
      }
      return res.data
    },
    function (error) {
      return Promise.reject(error)
    }
  )

  return instance(config)
}    

router文件：################################################################

import Vue from 'vue'
import VueRouter from 'vue-router'
//导航守卫时引入cookies
//import VueCookies from 'vue-cookies'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import(/* webpackChunkName: "about" */ '../views/HomeView.vue'),
  },
  {
    path: '/all',
    name: 'All',
    component: () => import(/* webpackChunkName: "about" */ '../views/AllProduct.vue')
  },
]
const router = new VueRouter({
  routes,
})

// const router = new VueRouter({
//   mode: 'history',
//   base: process.env.BASE_URL,
//   routes,
// })

// //白名单 路由的name
// const whiteList = ['Login', 'Register']

// //导航守卫
// router.beforeEach((to, from, next) => {
//   if (whiteList.includes(to.name)) {
//     return next()
//   }
//   if (VueCookies.get('token')) {
//     // this.$store.dispatch('getUserApi')
//     next()
//   } else {
//     next('/login')
//   }
// })

export default router

store文件（vuex）:############################################################

// Vuex  vuex页面刷新会被清空
import Vue from 'vue'
import Vuex from 'vuex'
import { onUsre } from '@/api/login'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: {},
  },
  getters: {},
  mutations: {
    // getUser 只有这一个（其他文件中没有）
    getUser(state, payload) {
      state.userInfo = { ...payload }
    },
  },
  actions: {
    // Vuex方法
    // 获取用户
    getuserApi(content) {
      onUsre().then((res) => {
        console.log(res.data)
        content.commit('getUser', res.data)
      })
    },
  },
  modules: {},
})