由于最近学习Vue脚手架，如何让新手快速搭建一个项目工程，并配置好项目中所必须的配置文件，特此写下一篇博客文章以此来做一下笔记。话不多说.

一 .创建项目工程目录

首先是安装node环境node官网地址
下载完node安装包，傻瓜式一路下一步完成安装。
打开 CMD, 输入 node -v即可如下

图1

创建项目工程

• Vue build ==> 打包方式，回车即可；
  　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
  　Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
  　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
  　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
  3.进入项目：cd vue-demo，安装依赖
  安装项目所需要的依赖
  安装成功后，项目文件夹中会多出一个目录：node_modules
  如图
  
  4npm run dev，启动项目
  项目启动成功

5. 打开浏览器输入##http://localhost:8080##即可访问你创建的项目默认的首页[图片上传失败...(image-e7d303-1560410494966)]

二.项目工程目录介绍

初始目录

三. 项目配置文件和一些必须的工具方法配置

1.首先项目请求的方法我喜欢使用axios ,看个人喜欢，有些喜欢使用fetch，或者其他的库都行，在这介绍一下我请求api数据的方法话不多说直接上代码：api文件夹下 index.js文件：

import axios from 'axios'
import store from '@/store'
import qs from "qs"
import {getToken} from '@/libs/util'
import router from '@/router'

let cancel, promiseArr = {}
const CancelToken = axios.CancelToken;

// 创建axios默认请求
const service = axios.create({
  baseURL: "",
  timeout: 5000, // request timeout,
})

// 请求拦截
service.interceptors.request.use(config => {
  // 为了防止重复请求ajax
  if (promiseArr[config.url]) {
    promiseArr[config.url]('操作取消')
    promiseArr[config.url] = cancel
  } else {
    promiseArr[config.url] = cancel
  }
  // 拼接公共参数
  config.params = Object.assign({}, config.params)
  //当为传统接收方式post的时候对参数进行序列化
  if (  config.method === "put" ||  config.method === "delete"  ) {
    // 序列化
    config.headers = {
      'Content-Type': "application/x-www-form-urlencoded;charset=utf-8" //当post的时候请求头需要序列化
    };
    config.data = qs.stringify(config.data);
  }
  // 是否携带cookie不知
  if (store.getters.token) {
    config.headers['Token'] = getToken() // 让每个请求携带token-- ['Token']为自定义key 请根据实际情况自行修改
  }
  return config
}, error => {
  // console.log(error) // for debug
  Promise.reject(error)
})
// 响应拦截
service.interceptors.response.use(
  response => response,
  error => {
    if (error) {
      switch (error.response.status) {
        case 401:
          router.push({
              path: "/login"
          });
          error.response.statusText = '未授权，请重新登录'
          break;
        case 404:
          error.response.statusText = '请求错误,未找到该资源'
          break;
      }
    } else {
      error.response.statusText = "连接到服务器失败"
    }
    return Promise.reject(error)
  })
export default {
  //get请求
  get(url, param) {
    return new Promise((resolve, reject) => {
      service({
        method: 'get',
        url,
        params: param,
        // 取消请求函数创建
        cancelToken: new CancelToken(c => {
          cancel = c
        })
      }).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //post请求
  post(url, param) {
    return new Promise((resolve, reject) => {
      service.post( url, param, // 取消请求函数创建
        {  cancelToken: new CancelToken(c => {
            cancel = c
          })
        }
      ).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

2.对项目中的所有的接口数据进行模块整理：关于用户登录接口 loginController.js

import httpExtension from './index'
import qs from 'qs';
const baseUrl = '/api' // 此处是为了方便统一管理，另一种目的是为了webpack为我们提供代理的功能
export const  getUserInfo = () =>  httpExtension.get(`${baseUrl}/user/getUserInfo`)

export const  login = (data) => httpExtension.post(`${baseUrl}/user/login`,  qs.stringify(data))

export const  logout = () => httpExtension.post(`${baseUrl}/user/logout`)

3.页面使用接口：

<script>
import { login } from '@/api/loginController'

export default {
  data() {
     return {
        loginParams：{username: '',password: ''}
    }
  }
},
methods: {
  click() {
    this._login(this.loginParams)
  },
 async _login(params) {
      const res = await login(params)
      if (res.responseCode === 0) {
          console.log(res.responseData)
      }
    },
}
</script>

4.对于前面介绍的webpack代理接口，在这说明一下以供参考：通常遇到的跨域问题，在vue项目里可以使用webpack提供的代理解决：

devServer: {
    port: 8080, // 端口
    open: process.platform ===  'darwin',
    host: '0.0.0.0',
    https: false,
    hotOnly: false,
    proxy:{
      '/api/*' : {
        target: 'http://localhost:3000',// 需要代理的后台服务ip
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: { '^/api': '/' }
      },
    }
  }

详情可以去看Vue官方文档，再次就不多赘述了，学习是自己的，一起加油！
你好，我是divine6,初次见面，请多关照！