vue配置 - 爱码网

安装 vue 脚手架：

cnpm install vue-cli -g / npm install vue-cli -g

搭建项目：

vue init webpack projectName

cd projectName

安装less预处理器

npm install less less-loader

找到webpack.base.conf.js文件module>rules中加入：

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

如需配置代理：

找到config>index.js文件

proxyTable: {
'/api':{
target: '代理域名',
changeOrigin: true,
secure: false,
pathRewrite:{
'^/api':'/api',
}
}

添加ui框架（element-ui）

npm install element-ui -save

main.js中加入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

路由配置：(如图)

vue配置

api封装：(如图)

fetch.js：

require('es6-promise').polyfill();
require('isomorphic-fetch');
import { api, formatUrl, parseJSON } from './plugins';
const Fetch = apiConfig => {
  const serviceMap = {};
  apiConfig.map(({ name, url, method }) => {
    const U= url;
    let Url= U;
    return serviceMap[name]=async function(data= null){
      serviceMap.credentials= 'include';
      serviceMap.mode= 'cors';
      serviceMap.method= method.toUpperCase();
      delete serviceMap['body'];
      switch (serviceMap.method) {
        case 'GET' || 'DELETE':
          if (data) Url= `${U}${formatUrl(data)}&t=${new Date().valueOf()}`;
          else Url= `${U}${formatUrl({t:new Date().valueOf()})}`;
          break;
        case 'POST' || 'PUT':
          Url = `${U}${formatUrl({t:new Date().valueOf()})}`;
          serviceMap.headers = {'Content-Type':'application/json;charset=UTF-8','Accept':'application/json'};
          serviceMap.body = data?JSON.stringify(data):'';
          break;
        default:
          Url= U;
      }
      return new Promise((resolve, reject) => {
        fetch(api + Url, serviceMap).then(response => { return response; })
          .then(parseJSON)
          .then(response => {
            if(response.status==0){
              resolve(response);
            }else{
              reject(response);
            }
          })
          .catch(error => {
            reject(error)
          });
      });
    }
  });
  return serviceMap;
};

export default Fetch;

plugins.js：

const api = '/api';
export {
  api,
};

export function formatUrl (obj){
  let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=${b}&`, '?');
  return params.substring(0, params.length - 1);
};

export function parseJSON(response) {
  return response.json();
}

api文件

vue配置