vue-template

vue page template (vue + vue-router + axios)

Setup

git clone --depth=1 https://github.com/wangcch/vue-template.git your-project-name
cd your-project-name
npm install
npm run dev

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

Directory

├─src
| ├─assets            Resource folder
| ├─components        Component folder
| ├─layouts           Layout folder
| ├─pages             Page folder
| ├─router            Router configuration folder
| ├─style             Main/Reset style
| ├─util              Other packaging tools
| ├─App.vue
| └─main.js

API

/src/util/api.js

name	API
GET	getUrlData()
DELETE	deleteUrlData()
POST	postUrlData()
PUT	putUrlData()
Download	downloadUrl()

import api from "@/util/api.js";

Data DMEO:

const data = {
	name: 'demo'
}

Proxy

/build/webpack.dev.conf.js -> devServer.proxy

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

More: Webpack dev-server #devserver-proxy

GET

/**
 * GET api
 * @param {String} suffix url address suffix
 * @param {Object} data parameters
 * @param function res:Object response; isErr:Boolean undefined/true
 */
api.getUrlData(suffix, data, callback);

api.getUrlData("user/info", data, (res, isErr) => {
  console.log(res, isErr);
});

DELETE

/**
 * GET api
 * @param {String} suffix url address suffix
 * @param {Object} data parameters
 * @param function res:Object response; isErr:Boolean undefined/true
 */
api.deleteUrlData(suffix, data, callback);

api.deleteUrlData("user/del", data, (res, isErr) => {
  console.log(res, isErr);
});

POST

/**
 * GET api
 * @param {String} suffix url address suffix
 * @param {Object} data parameters
 * @param function res:Object response; isErr:Boolean undefined/true
 * @param {Boolean} isJson form_data/json
 */
api.postUrlData(suffix, data, callback, isJson);

api.postUrlData("user/login", data, (res, isErr) => {
  console.log(res, isErr);
}, true);

PUT

/**
 * GET api
 * @param {String} suffix url address suffix
 * @param {Object} data parameters
 * @param function res:Object response; isErr:Boolean undefined/true
 * @param {Boolean} isJson form_data/json
 */
api.putUrlData(suffix, data, callback, isJson);

api.putUrlData("user/info", data, (res, isErr) => {
  console.log(res, isErr);
}, true);

Download

/**
 * GET Download
 * @param {String} url download url
 */
api.downloadUrl(url);

Licence

MIT