vue项目常见模块的安装及使用
文章目录
- 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。