VUE採用VW佈局結合vant UI搭建項目流程
- 默認本地安裝好了node環境及v-cli腳手架（未安裝的話請行安裝）,檢查版本。
- 代碼編輯器（webStorm）打開項目文件夾，鍵入命令：
vue init webpack Management
- 根據命令提示做相應的操作：
4.接下來安裝vw佈局需要的插件，在.postcssrc.js文件中Vue-cli默認配置了三個PostCSS插件
我們還需要安裝以下六個插件：
postcss-aspect-ratio-mini
postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
postcss-viewport-units
cssnano
鍵入命令：
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano –S
安裝完成後在package.json中會看到如下配置：
5.接下來在.postcssrc.js文件對新安裝的PostCSS插件進行配置： （注意紅框中的內容）
6.安裝sass（項目用sass預編譯語言，採用vant UI）
npm i node-sass --save npm i sass-loader --save
安裝完成在package.json配置清單可以查看對應項及版本號
7.引入vant （不作贅述，按照官方文檔操作，建議採用按需引入的方式）
8.修改config文件
9.統一處理axios請求，處理請求攔截和響應攔截（http.js文件）
var root = "/api";
import axios from "axios";
import qs from "qs";
import { Toast } from "vant";
import { clearStorage } from './clear'
import router from "../router";
import { Loading } from 'vant';
// axios 配置
axios.defaults.timeout = 50000;
axios.defaults.baseURL = root;
axios.defaults.withCredentials = true;
var num=0;
// http request 攔截器
axios.interceptors.request.use(
config => {
num++;
if( num === 1 ){
window['getHref'] = val => {
regist(val);
}
// buffer_tip_show();
};
if (config.method == "post" && config.url.indexOf("/upload/img") <= 0) {
config.data.lang_id = config.data.lang_id || localStorage.getItem("lang_id");
if (localStorage.getItem("token")) {
config.data.token = localStorage.getItem("token");
}
if (localStorage.getItem("keyid")) {
config.data.keyid = localStorage.getItem("keyid");
}
config.data = qs.stringify(config.data);
}
if (config.method == "post" && config.url.indexOf("/upload/img") > 0) {
config.headers = {
Accept: "application/json, text/javascript, */*",
"Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryhwvBOffcBtcVGV8f"
};
} else {
config.headers = {
Accept: "application/json, text/javascript, */*",
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
};
}
return config;
},
err => {
return Promise.reject(err);
}
);
// http response 攔截器
axios.interceptors.response.use(
response => {
num--;
if( num === 0 ){
// buffer_tip_hidden();
};
//請先登錄
if (response.data.status == 0) {
// 錯誤
Toast(response.data.msg);
}
else if (response.data.status == 2) {
//請重新登錄
let instance = Toast(response.data.msg);
// 清除Session
clearStorage();
setTimeout(() => {
instance.close();
router.push("/login");
}, 1000);
}
// else if (response.data.status == 3) {
// let instance = Toast(response.data.msg);
// setTimeout(() => {
// instance.close();
// router.push("/security_code");
// }, 2000);
// }
return response;
},
error => {
num--;
if( num === 0 ){
// buffer_tip_hidden();
};
//請先登錄
if (error.response.data.status == 2) {
//請重新登錄
let instance = Toast(response.data.msg);
// 清除Session
clearStorage();
setTimeout(() => {
instance.close();
router.push("/login");
}, 1000);
return false;
}
return Promise.reject(error.response.data);
}
);
export default axios;
/**
* fetch 請求方法
* @param url
* @param params
* @returns {Promise}
*/
export function fetch(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err);
});
});
}
/**
* post 請求方法
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}, responseType) {
return new Promise((resolve, reject) => {
axios.post(url, data, responseType).then(
response => {
resolve(response.data);
},
err => {
reject(err);
}
);
});
}
/**
* patch 方法封裝
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data).then(
response => {
resolve(response.data);
},
err => {
reject(err);
}
);
});
}
/**
* put 方法封裝
* @param url
* @param data
* @returns {Promise}
*/
export function put(url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data).then(
response => {
resolve(response.data);
},
err => {
reject(err);
}
);
});
}
/**
* get 請求方法
* @param url
* @param data
* @returns {Promise}
*/
export function get(url, data = {}) {
return new Promise((resolve, reject) => {
axios.get(url, data).then(
response => {
resolve(response.data);
},
err => {
reject(err);
}
);
});
}
export function regist(val){
Toast(val);
}