创建vue项目vue create 项目名字
运行项目：cnpm run serve/cnpm run dev 需要配置
打包vue项目：npm run build
安装node_modules文件夹：npm install (npm i) npm会根据package.json配置文件中的依赖配置下载安装
其他功能：
瀑布流
链接 Configuration Reference.
安装命令：npm install --save vue-waterfall-easy
移动端rem
安装依赖：npm i lib-flexible --save
main.js 引入： import 'lib-flexible'
安装postcss-px2rem :npm install postcss-px2rem --save-dev
package.config.js (可能需要创建文件package.config.js)添加：
plugins: {
autoprefixer: {},
"postcss-px2rem": {
remUnit: 75,
exclude: /node_modules|folder_name/i //此代码 第三方ui框架不会使用rem
}
}
index.html 添加<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> 禁止页面放大
复制到剪切板
安装依赖：
先安装npm install --save clipboard
再安装npm install --save vue-clipboard2
main.js引入：
import VueClipboard from 'vue-clipboard2' //复制到剪切板
Vue.use(VueClipboard)
MD5加密
npm install --save js-md5
h5生成img
npm install dom-to-image
axios的使用与封装
安装axios依赖：npm install axios --save
安装qs依赖：npm install qs
src文件夹下创建 api文件夹:
api文件夹下创建http.js用来封装axios逻辑：
http.js 内容
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
axios.defaults.withCredentials = true; //发送cookie
if (process.env.NODE_ENV == 'development') {
if (window.location.origin == '') {
axios.defaults.baseURL = '';
}
if (window.location.origin == '') {
axios.defaults.baseURL = ''
}
} else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = window.location.origin
}
// axios.defaults.withCredentials = true; //发送cookie
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //post请求头的设置
// 响应拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
// let token = window.localStorage.getItem("accessToken")
// if (token) {
// response.headers.accessToken = token; //将token放到请求头发送给服务器
// return response;
// //这里经常搭配token使用，将token值配置到tokenkey中，将tokenkey放在请求头中
// // config.headers['accessToken'] = Token;
// }else{
// console.log(response)
// response.config.headers.accessToken = 123;
// }
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 4300:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
// Toast({
// message: '登录过期，请重新登录',
// duration: 1000,
// forbidClick: true
// });
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误，直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
)
/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
});
}
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
* @param {Object} head_conf [修改请求头]
*/
export function post(url, params, head_conf) {
return new Promise((resolve, reject) => {
if (head_conf != undefined) { //文件上传获取url
console.log("上传文件")
axios.post(url, params, head_conf)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
} else {
axios.post(url, QS.stringify(params)) //需要序列化字符串，处理发送请求的参数 这里统一转化
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
}
});
}
api文件夹下创建api.js 来封装调用方法```
import api from './api/api'
Vue.prototype.$api = api;
api.js 内容
import {
get,
post
} from './http';
export default {
test(data) { //post方法
return post('/json/v1/sk/test', data)
},
test(data) { //get方法
return get('/json/v1/sk/test', data)
},
}
home.vue 页面调用api请求
getData(){
this.$api.test(
{ test: 123, data2: 234 }
)
.then((res) => {
//成功回调
})
.catch((err) => {
//失败回调
});
}
网友评论