用 vue-cli创建一个项目

1、安装 vue-cli脚手架 : vue init webpack shell

2、利用ant design vue组件开发页面

      在项目中安装 ant design vue:  npm install ant-design-vue

      安装后，再main.js中进行如下操作：

      import Vue from 'vue'
      import Antd from 'ant-design-vue'
      import 'ant-design-vue/dist/antd.css'
      Vue.use(Antd)

3、开发过程中使用less进行调动样式

      在项目中安装 less : npm install less less-loader --save-dev

      然后在build文件夹下的webpack.base.conf.js文件中进行配置less，如下 

      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
      },

4、利用 axios进行后端接口请求配置

      在项目中安装 vue-axios : npm install axios

      然后，创建一个新的js文件，在其中创建axios实例

      import Vue from 'vue'
      import axios from 'axios'

      // 创建axios实例
      const service = axios.create({
        baseURL: '', // api的base_url
        timeout: 60000 // 请求超时时间
      })

      const err = (error) => {
        console.log('err' + error) // for debug
        // return Promise.reject(error)
      }

      // request interceptor
      service.interceptors.request.use(config => {
        const token = window.localStorage.getItem("token")
        if (token) {
          config.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带自定义 token 请根据实际情况自行修改
        }
        return config
      }, err)

      service.interceptors.response.use(response => {
        /**
         * code为非200是抛错 可结合自己业务进行修改
         */
        const res = response
        if (res.status !== 200) {
          if (res.status === 401) {
          }
        } else {
          return response.data
        }
      }, )
      export default service

5、设置代理

      在config文件夹下的index.js文件中的proxyTable中进行配置代理的地址，如下： 

      proxyTable: {
        "/codeRequest":'http://IP:Port'
      },

      配置代理成功后，可成功使用axios调用后台接口

6、登陆/退出，用vuex进行辅助存储清除token

      首先安装vuex: npm install vuex --save

      然后进行创建一个vuex实例：在文件夹src下创建一个store的文件夹=>在store文件夹下创建一个index.js文件，在此文件中进行如下基本配置：

      import Vue from 'vue'
      import Vuex from 'vuex'
      Vue.use(Vuex)
      export default new Vuex.Store({
        modules:{},
        state:{},
        mutations:{},
        actions:{}
      })