使用 vue-cli2.0脚手架搭建项目+代理+vuex+elementUI+less

1. 脚手架搭建教程

2. 使用 Vuex

新建 store.js 利用 Vuex.state进行存储

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

export const store = new vuex.Store({
  state: {
    name: '十七岁'
  }
})

之后在main.js 中进行实例化

import { store } from '路径'
Vue.use(store)    // 实例化

在页面级别通过 this.$store.state.name 对该变量进行更改、获取

3. 利用axios 进行跨域函数封装

import axios from 'axios'
import { stringify } from 'qs'
axios.defaults.timeout = 5000
let debug = true
let baseUrl = debug ? 'http://192.168.37.173:3000/mock/23/api' : '正式地址'
axios.interceptors.request.use(
  config => {
    console.log(config)
    config.method === 'POST'
      ? config.data = stringify(...config.data)
      : config.params = config.params
    config.headers['Content-type'] = 'application/json'
    return config
  },
  err => {
    console.log('失败')
    console.log(err)
  })

axios.interceptors.response.use(
  response => {
    return response
  },
  err => {
    setTimeout(() => {
      this.fullscreenLoading = false
    }, 2000)
    if (err && err.response) {
      switch (err.response.status) {
        case 400: err.message = '请求错误(400)'; break
        case 401: err.message = '未授权，请重新登录(401)'; break
        case 403: err.message = '拒绝访问(403)'; break
        case 404: err.message = '请求出错(404)'; break
        case 408: err.message = '请求超时(408)'; break
        case 500: err.message = '服务器错误(500)'; break
        case 501: err.message = '服务未实现(501)'; break
        case 502: err.message = '网络错误(502)'; break
        case 503: err.message = '服务不可用(503)'; break
        case 504: err.message = '网络超时(504)'; break
        case 505: err.message = 'HTTP版本不受支持(505)'; break
        default: err.message = `连接出错(${err.response.status})!`
      }
    } else {
      err.message = '连接服务器失败!'
    }
    return Promise.reject(err)
  }
)

export function Http (url, params = {}, method) {
  return new Promise((resolve, reject) => {
    axios({
      url: `${url}`,
      method,
      data: params,
      headers: {
        contentType: 'application/json'
      }
    })
      .then((res) => {
        if (res.data.code == '0') {
          resolve(res)
        } else {
          console.log('进行错误处理')
        }
      })
      .catch((err) => {
        reject(err)
      })
  })
}

页面级别通过 import { Http } from ‘路径’ 对该函数进行调用

4. 引入 less
新起一个文件夹用于存放 .less文件 然后引入到相关页面 前提是已经npm了 less、less-loader

5. 新建页面、配置路由

components文件夹新建文件， 之后再 router/index.js 进行配置

然后通过 this.$router.push(‘路径’) 就可以实现跳转

6. 配置代理
路径在 config/index.js 中 对 proxyTable 进行配置

proxyTable: {
 '/api': {
    target: 'www.baidu.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

假如你的路径是 www.baidu.com/getName/fe 调用接口的时候就可以写成

/api/getName/fe 

这样就可以自动代理到请求的路径了

7. 引入 UI 组件
下载 cnpm install element-ui --save
引入 在main.js中

8. 如何使用插件
同样道理 npm 下载下来 然后再main 中进行实例化 然后再页面级别通过 import 进行引入就可以使用了