文章目录
- nodejs安装及创建vue项目参考文章
- element-ui
- element-ui官网
- 安装element-ui
- vue-router
- 官网
- 安装vue-router
- vue-router使用
- axios
- 官网
- 安装
- 使用axios
- 简单使用
- 对请求方法进行加工使用
- vuex
- 简介
- 官网
- 安装vuex
- 使用vuex
- js-cookie
- 安装
- 使用
- qs
- 简介
- 安装
- 使用
- qs特点
nodejs安装及创建vue项目参考文章
nodejs安装及vue项目创建
element-ui
element-ui官网
elementUI
安装element-ui
- 安装element-ui
npm install element-ui -S
- 完整引用
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
})
- 按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc 修改为:
{"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为* Vue.use(Button)* Vue.use(Select)*/new Vue({el: '#app',render: h => h(App)
});
vue-router
官网
vuerouter官网:https://v3.router.vuejs.org/zh/installation.html
安装vue-router
npm install vue-router@3 --save
vue-router使用
- 在src文件夹下新建router文件夹
- 在router文件夹下新建index.js
import Vue from "vue";
import VueRouter from "vue-router";
import FileList from "@/components/FileList.vue";Vue.use(VueRouter);
// 创建不同的路由放到routes列表中
const routes = [{path: '/file',name: 'file',component: FileList}
]
//创建router实例
const router = new VueRouter({mode: "hash",routes: routes
})
// 向外暴露router
export default router;
axios
官网
axios官网:https://www.axios-http.cn/docs/intro
安装
npm install axios --save
使用axios
简单使用
- 创建request文件夹
- 在request文件夹下创建http.js
- 在使用的地方引入http.js进行发送请求
import axios from "axios";const http =axios.create({//通用请求的地址前缀baseURL: '/api',timeout: 10000, //超时时间})//添加请求拦截器http.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;},function (error){//对请求错误做些什么return Promise.reject(error);})//添加响应拦截器http.interceptors.response.use(function (response){//对响应数据做点什么return response;},function (error) {//对响应错误做点什么return Promise.reject(error)})export default http
对请求方法进行加工使用
- 新建libs文件夹
- 在libs文件夹下新建axios.js
- 在api模块引用不同的请求方法,进行请求
import axios from 'axios';
import { getStore, setStore } from './storage';
import { router } from '../router/index';
import { Message } from 'view-design';
import Cookies from 'js-cookie';
let base = '/zwz';axios.defaults.timeout = 15000;
axios.interceptors.request.use(config => {return config;
}, err => {Message.error('请求超时');return Promise.resolve(err);
});axios.interceptors.response.use(response => {const data = response.data;switch (data.code) {case 401:Cookies.set('userInfo', '');setStore('accessToken', '');if (router.history.current.name != "login") {if (data.message !== null) {Message.error(data.message);} else {Message.error("未知错误,请重新登录");}router.push('/login');}break;case 403:if (data.message !== null) {Message.error(data.message);} else {Message.error("未知错误");}break;case 500:if (data.message !== null) {Message.error(data.message);} else {Message.error("未知错误");}break;default:return data;}return data;
}, (err) => {Message.error(err.toString());return Promise.resolve(err);
});export const getRequest = (url, params) => {let accessToken = getStore('accessToken');return axios({method: 'get',url: `${base}${url}`,params: params,headers: {'accessToken': accessToken}});
};export const postRequest = (url, params) => {let accessToken = getStore("accessToken");return axios({method: 'post',url: `${base}${url}`,data: params,transformRequest: [function (data) {let ret = '';for (let it in data) {ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';}ret = ret.substring(0, ret.length - 1);return ret;}],headers: {'Content-Type': 'application/x-www-form-urlencoded','accessToken': accessToken}});
};export const putRequest = (url, params) => {let accessToken = getStore("accessToken");return axios({method: 'put',url: `${base}${url}`,data: params,transformRequest: [function (data) {let ret = '';for (let it in data) {ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';}ret = ret.substring(0, ret.length - 1);return ret;}],headers: {'Content-Type': 'application/x-www-form-urlencoded','accessToken': accessToken}});
};export const postBodyRequest = (url, params) => {let accessToken = getStore('accessToken');return axios({method: 'post',url: `${base}${url}`,data: params,headers: {'accessToken': accessToken}});
};export const getNoAuthRequest = (url, params) => {return axios({method: 'get',url: `${base}${url}`,params: params});
};export const postNoAuthRequest = (url, params) => {return axios({method: 'post',url: `${base}${url}`,data: params,transformRequest: [function (data) {let ret = '';for (let it in data) {ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';}ret = ret.substring(0, ret.length - 1);return ret;}],headers: {'Content-Type': 'application/x-www-form-urlencoded'}});
};
vuex
简介
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
官网
vuex官网:https://vuex.vuejs.org/zh/
安装vuex
npm install vuex --save
//安装过程中可能会因为版本不同进行报错,安装合适版本
npm install vuex@3.6.2 --save
使用vuex
- src下新建store文件夹
- store文件夹下创建index.js
- store文件夹下创建modules文件夹存在模块文件
index.js
import Vue from 'vue';
import Vuex from 'vuex';
import app from './modules/app';
import user from './modules/user';
Vue.use(Vuex);
const store = new Vuex.Store({state: {},mutations: {},actions: {},modules: {app,user}
});
export default store;
创建不同模块文件
app.js
const app = {state: {menuList: [],},mutations: {updateMenulist(state, routes) {state.menuList = routes;}}
};
export default app;
user.js
import Cookies from 'js-cookie';
const user = {state: {},mutations: {logout () {Cookies.remove('userInfo');localStorage.clear();}}
};
export default user;
js-cookie
安装
npm install js-cookie
使用
- 当前页面使用
import Cookies from "js-cookie";
- 全局引用
- 在main.js中引入
- 设置Vue.prototype.$cookie = Cookies
import Cookies from 'js-cookie'
Vue.prototype.$cookie = Cookies
qs
简介
qs是一个JavaScript库,主要用于查询字符串的解析和序列化。它提供了一些附加安全性的特性,是处理URL查询字符串(如将对象序列化为查询字符串或将查询字符串解析为对象)的理想工具。
安装
npm install qs --save
使用
- 全局引入
- 在main.js引入qs
- 设置prototype:Vue.prototype.$qs = qs
- this.$qs进行qs使用
import qs from 'qs'
Vue.prototype.$qs = qs
this.$qs
- 需要的时候引入
- 在需要的地方引入qs
import Qs from 'qs'
qs特点
qs参考博客
- qs.parse():功能:将URL的查询字符串解析成JavaScript对象的形式。
示例:给定查询字符串method=queryTestData&id=12&appToken=123,使用qs.parse()可以将其解析为对象{ method: ‘queryTestData’, id: ‘12’, appToken: ‘123’ }。 - qs.stringify():功能:将JavaScript对象序列化成URL的查询字符串形式,多个键值对之间用&进行拼接。
示例:给定对象{ name: ‘nihao’, age: 30 },使用qs.stringify()可以将其序列化为查询字符串name=nihao&age=30。