第三方插件可以增强vue，帮助我们更好的开发项目，如axios, vuex, vue-router,elementui等
我们可以自定义插件，步骤如下：
- 在vue项目下的src文件夹下创建plugins文件夹，创建一个index.js文件
- 在index.js中定义插件
import Vue from 'vue'
export default {
install(a) {
console.log(a)
// 写代码，加入混入
Vue.mixin({
methods: {
handleShowName() {
alert(this.name)
}
}
})
}
}- 使用插件 在main.js中添加如下代码
import plugins from './plugins'
Vue.use(plugins) // 自动调用插件内的install，完成对Vue的强化1.axios组件
安装：
npm install -S axios使用：
发送get请求
<script>
// 导入axios
import axios from 'axios'
// 使用axiosaxios.get('http://127.0.0.1:8000/user/').then(res=>{
// 正确返回数据操作
console.log(res.data)
}).catch(error=>{
// 发送失败处理
})</script>发送post请求，并携带参数
import axios from 'axios'
axios.post('http://127.0.0.1:8000/user/', {'username':'kunmzhao', 'password':'123'}).then(res=>{
}).catch(error=>{
})发送post请求。携带参数，头部携带token
详细使用：
1 1 // 发起一个post请求
2 2 axios({
3 3 method: 'post',
4 4 url: '/user/12345',
5 5 data: {
6 6 firstName: 'Fred',
7 7 lastName: 'Flintstone'
8 8 }
9 9 });
10 10
11 11
12 12
13 13 {
14 14 // url 是用于请求的服务器 URL
15 15 url: '/user',
16 16
17 17 // method 是创建请求时使用的方法
18 18 method: 'get', // 默认值
19 19
20 20 // baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。
21 21 // 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
22 22 baseURL: 'https://some-domain.com/api/',
23 23
24 24 // transformRequest 允许在向服务器发送前，修改请求数据
25 25 // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
26 26 // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData，或 Stream
27 27 // 你可以修改请求头。
28 28 transformRequest: [function (data, headers) {
29 29 // 对发送的 data 进行任意转换处理
30 30
31 31 return data;
32 32 }],
33 33
34 34 // transformResponse 在传递给 then/catch 前，允许修改响应数据
35 35 transformResponse: [function (data) {
36 36 // 对接收的 data 进行任意转换处理
37 37
38 38 return data;
39 39 }],
40 40
41 41 // 自定义请求头
42 42 headers: {'X-Requested-With': 'XMLHttpRequest'},
43 43
44 44 // params 是与请求一起发送的 URL 参数
45 45 // 必须是一个简单对象或 URLSearchParams 对象
46 46 params: {
47 47 ID: 12345
48 48 },
49 49
50 50 // paramsSerializer是可选方法，主要用于序列化params
51 51 // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
52 52 paramsSerializer: function (params) {
53 53 return Qs.stringify(params, {arrayFormat: 'brackets'})
54 54 },
55 55
56 56 // data是作为请求体被发送的数据
57 57 // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
58 58 // 在没有设置 `transformRequest` 时，则必须是以下类型之一:
59 59 // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
60 60 // - 浏览器专属: FormData, File, Blob
61 61 // - Node 专属: Stream, Buffer
62 62 data: {
63 63 firstName: 'Fred'
64 64 },
65 65
66 66 // 发送请求体数据的可选语法
67 67 // 请求方式 post
68 68 // 只有 value 会被发送，key 则不会
69 69 data: 'Country=Brasil&City=Belo Horizonte',
70 70
71 71 // `timeout` 指定请求超时的毫秒数。
72 72 // 如果请求时间超过 `timeout` 的值，则请求会被中断
73 73 timeout: 1000, // 默认值是 `0` (永不超时)
74 74
75 75 // `withCredentials` 表示跨域请求时是否需要使用凭证
76 76 withCredentials: false, // default
77 77
78 78 // `adapter` 允许自定义处理请求，这使测试更加容易。
79 79 // 返回一个 promise 并提供一个有效的响应 （参见 lib/adapters/README.md）。
80 80 adapter: function (config) {
81 81 /* ... */
82 82 },
83 83
84 84 // `auth` HTTP Basic Auth
85 85 auth: {
86 86 username: 'janedoe',
87 87 password: 's00pers3cret'
88 88 },
89 89
90 90 // `responseType` 表示浏览器将要响应的数据类型
91 91 // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
92 92 // 浏览器专属：'blob'
93 93 responseType: 'json', // 默认值
94 94
95 95 // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
96 96 // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求
97 97 // Note: Ignored for `responseType` of 'stream' or client-side requests
98 98 responseEncoding: 'utf8', // 默认值
99 99
100 100 // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称
101 101 xsrfCookieName: 'XSRF-TOKEN', // 默认值
102 102
103 103 // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
104 104 xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值
105 105
106 106 // `onUploadProgress` 允许为上传处理进度事件
107 107 // 浏览器专属
108 108 onUploadProgress: function (progressEvent) {
109 109 // 处理原生进度事件
110 110 },
111 111
112 112 // `onDownloadProgress` 允许为下载处理进度事件
113 113 // 浏览器专属
114 114 onDownloadProgress: function (progressEvent) {
115 115 // 处理原生进度事件
116 116 },
117 117
118 118 // `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
119 119 maxContentLength: 2000,
120 120
121 121 // `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数
122 122 maxBodyLength: 2000,
123 123
124 124 // `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
125 125 // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
126 126 // 则promise 将会 resolved，否则是 rejected。
127 127 validateStatus: function (status) {
128 128 return status >= 200 && status < 300; // 默认值
129 129 },
130 130
131 131 // `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
132 132 // 如果设置为0，则不会进行重定向
133 133 maxRedirects: 5, // 默认值
134 134
135 135 // `socketPath` 定义了在node.js中使用的UNIX套接字。
136 136 // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
137 137 // 只能指定 `socketPath` 或 `proxy` 。
138 138 // 若都指定，这使用 `socketPath` 。
139 139 socketPath: null, // default
140 140
141 141 // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
142 142 // and https requests, respectively, in node.js. This allows options to be added like
143 143 // `keepAlive` that are not enabled by default.
144 144 httpAgent: new http.Agent({ keepAlive: true }),
145 145 httpsAgent: new https.Agent({ keepAlive: true }),
146 146
147 147 // `proxy` 定义了代理服务器的主机名，端口和协议。
148 148 // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
149 149 // 使用 `false` 可以禁用代理功能，同时环境变量也会被忽略。
150 150 // `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据。
151 151 // 这将设置一个 `Proxy-Authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
152 152 // 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
153 153 proxy: {
154 154 protocol: 'https',
155 155 host: '127.0.0.1',
156 156 port: 9000,
157 157 auth: {
158 158 username: 'mikeymike',
159 159 password: 'rapunz3l'
160 160 }
161 161 },
162 162
163 163 // see https://axios-http.com/zh/docs/cancellation
164 164 cancelToken: new CancelToken(function (cancel) {
165 165 }),
166 166
167 167 // `decompress` indicates whether or not the response body should be decompressed
168 168 // automatically. If set to `true` will also remove the 'content-encoding' header
169 169 // from the responses objects of all decompressed responses
170 170 // - Node only (XHR cannot turn off decompression)
171 171 decompress: true // 默认值
172 172
173 173 }View Code
导航拦截器的使用
1 /* eslint-disable */
2
3 import axios from "axios";
4
5 import {useRouter} from "vue-router";
6 import {useStore} from "vuex";
7 import {getToken} from "@/plugins/cookie";
8
9 const router = useRouter();
10 const store = useStore();
11 axios.defaults.baseURL = 'https://api.luffycity.com/api/';
12 // axios.defaults.headers.common['Authorization'] = getToken();
13 // axios.defaults.headers.post['Content-Type'] = 'application/json';
14
15
16 let config = {
17 // baseURL: process.env.baseURL || process.env.apiUrl || ""
18 // timeout: 60 * 1000, // Timeout
19 // withCredentials: true, // Check cross-site Access-Control
20 };
21
22 const _axios = axios.create(config);
23 // 每次发送axios请求都会执行
24 _axios.interceptors.request.use(
25 function (config) {
26 // Do something before request is sent
27 // console.log("请求前执行");
28 const token = getToken();
29 if (token) {
30 config.headers['token'] = token;
31 }
32 return config;
33 }
34 );
35
36
37 // 每次收到响应都会执行
38 _axios.interceptors.response.use(
39 function (response) {
40 // Do something with response data
41 // 请求成功 200成功（登录失效了）{code:-1,msg:"登录失效"} {code:0,msg:data} {code:1000,msg:"认证失败"}
42 if (response.data.code === 1000) {
43 //认证失败，token过期，登录失败 -> 登录页面
44 store.commit("logout");
45 router.replace({name: "Login"});
46 return Promise.reject();
47 }
48
49 return response;
50 },
51 function (error) {
52 // Do something with response error
53 // 请求失败自动执行此处的代码，返回的状态码：500（认证401）
54 if (error.response.status === 401) {
55 store.commit("logout");
56 router.replace({name: "Login"});
57 }
58 return Promise.reject(error);
59 }
60 );
61
62
63 export default _axios;
2.elementui的使用
作用：帮我们美化页面
支持vue2版本的：https://element.eleme.cn/#/zh-CN/component/installation
支持vue3把版本的：https://element-plus.gitee.io/zh-CN/guide/quickstart.html
2.1 安装
2.1.1 vue2安装引用
安装
npm i element-ui -S引用：在main.js中添加如下代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2.1.2 vue3的安装引用
安装
npm install element-plus --save引用：在main.js中添加如下代码
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
Vue.use(ElementPlus)
2.2 使用
将代码复制到自己组件即可，唯一要注意的就是代码复制全了
1 <template>
2 <div id="app">
3 <i class="el-icon-edit"></i>
4 <i class="el-icon-share"></i>
5 <i class="el-icon-delete"></i>
6 <el-button type="primary" icon="el-icon-search">搜索</el-button>
7
8 <div>
9 <el-input placeholder="请输入内容" v-model="input1">
10 <template slot="prepend">Http://</template>
11 </el-input>
12 </div>
13 <div style="margin-top: 15px;">
14 <el-input placeholder="请输入内容" v-model="input2">
15 <template slot="append">.com</template>
16 </el-input>
17 </div>
18 <div style="margin-top: 15px;">
19 <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
20 <el-select v-model="select" slot="prepend" placeholder="请选择">
21 <el-option label="餐厅名" value="1"></el-option>
22 <el-option label="订单号" value="2"></el-option>
23 <el-option label="用户电话" value="3"></el-option>
24 </el-select>
25 <el-button slot="append" icon="el-icon-search"></el-button>
26 </el-input>
27 </div>
28 </div>
29 </template>
30
31 <style>
32 .el-select .el-input {
33 width: 130px;
34 }
35 .input-with-select .el-input-group__prepend {
36 background-color: #fff;
37 }
38
39
40 </style>效果：
3.vuex使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
说白了就是一个全局存储数据的，我们项目的任意组件中都可以使用vuex中定义的数据和方法
3.1 vuex的安装
npm install vuex@next --save3.2 vuex的引用
在vue项目的src目录下创建store文件夹并创建index.js文件，文件内容如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 存放变量
},
getters: {
// TBD
},
mutations: {
// 存放方法，对state中的变量进行操作
},
actions: {
// 存放方法，调用mutations中的方法
},
modules: {
// TBD
}
})然后再main.js中加入如下代码
import store from './store'
new Vue({
router,
render: h => h(App)
}).$mount('#app')3.3 vuex的使用
小案例
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 存放变量
sum: 0
},
getters: {
// TBD
},
mutations: {
// 存放方法，对state中的变量进行操作
// 方法有两个参数：state就是上面的state和数据
Add(state, value) {
state.sum += value
}
},
actions: {
// 存放方法，调用mutations中的方法
// 方法有两个参数：上下文和数据
add(context,value){
// 通过上下文调用mutations中的方法
context.commit('Add', value)
}
},
modules: {
// TBD
}
})main.vue
<template>
<div id="app">
<el-button type="success" @click="handle">+2</el-button>
<!-- 在任意组件中获取store中的state的数据 -->
vuex中的store中的数值:{{ this.$store.state.sum }}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {}
},
methods: {
handle() {
// 调用store actions中定义的方法
this.$store.dispatch('add', 2)
}
}
}
</script>
<style>
</style>
效果如下：
我们想要获取state中的变量
this.$store.state.变量如果想要修改state的变量就比较麻烦
// 1.在mutations定义方法，完成对变量的修改
// 2. 在actions中定义方法,调用mutations中的方法
// 3. 在外部组件，使用this.$store.dispatch('actions中的方法', 数据)
4.vue-router的使用
vue-router组件 可以实现 SPA（single Page Application），即：单页面应用。简而言之就是项目只有一个页面。
4.1 安装
npm install vue-router@4在项目中src目录下的就会生成router目录，目录中有index.js文件，代码如下：
1 import Vue from 'vue'
2 import VueRouter from 'vue-router'
3 import HomeView from '../views/HomeView.vue'
4
5 Vue.use(VueRouter)
6
7 const routes = [
8 {
9 path: '/',
10 name: 'home',
11 component: HomeView
12 },
13 {
14 path: '/about',
15 name: 'about',
16 // route level code-splitting
17 // this generates a separate chunk (about.[hash].js) for this route
18 // which is lazy-loaded when the route is visited.
19 component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
20 }
21 ]
22
23 const router = new VueRouter({
24 mode: 'history',
25 base: process.env.BASE_URL,
26 routes
27 })
28
29 export default routerView Code
或者用如下命令，会安装router，同时生成对应文件夹和文件
vue add router
4.2 快速使用
- 在router.js中绑定路由和组件
- 在views中定义组件
- 在app.vue中可以使用router-link绑定链接，同时将组件渲染在router-view中
1.配置router路由
1 import Vue from 'vue'
2 import VueRouter from 'vue-router'
3 import HomeView from '../views/HomeView.vue'
4 import Login from "@/views/Login";
5 import Home from "@/views/Home";
6
7 Vue.use(VueRouter)
8
9 const routes = [
10 {
11 path: '/',
12 name: 'home',
13 component: Home
14 },
15 {path: '/login', name: 'login', component: Login}
16 ]
17
18 const router = new VueRouter({
19 mode: 'history',
20 base: process.env.BASE_URL,
21 routes
22 })
23
24 export default router2. 配置Home，Login两个组件
<template>
<div>我是一个首页</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style><template>
<div>
<el-input v-model="input" placeholder="请输入用户名"></el-input>
<el-input placeholder="请输入密码" v-model="input" show-password></el-input>
</div>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>3. 在app.vue中
<template>
<div id="app">
<!-- 相当于a连接-->
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<div class="container">
<!-- 将子组件页面显示在在这里面-->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {}
},
methods: {}
}
</script>
<style>
</style>效果如下：
4.3 设定动态路由
- 绑定路由
const router = new VueRouter({
routes: [
{ path: '/', component: Home},
{ path: '/course', component: Course, name: "Course"}
{ path: '/detail/:id', component: Detail, name: "Detail"}
],
})- HTML展示
<div>
<router-link to="/">首页</router-link>
<router-link to="/course">课程</router-link>
<router-link to="/detail/123">课程</router-link>
// 设定动态路由：通过路径方式
<router-link :to="{path:'/course'}">课程</router-link>
<router-link :to="{path:'/course?size=19&page=2'}">课程</router-link>
<router-link :to="{path:'/course', query:{size:19,page:2}">课程</router-link>
// 设定动态路由：通过name方式
<router-link :to="{name:'Course'}">课程</router-link>
<router-link :to="{name:'Course', query:{size:19,page:2} }">课程</router-link>
<router-link :to="{path:'/detail/22',query:{size:123}}">Linux</router-link>
<router-link :to="{name:'Detail',params:{id:3}, query:{size:29}}">网络安全</router-link>
</div>
<h1>内容区域</h1>
<router-view></router-view>- 组件获取URL传值和GET参数
(vue2方式)
const Detail = {
data: function () {
return {
title: "详细页面",
paramDict: null,
queryDict: null,
}
},
created: function () {
this.paramDict = this.$route.params;
this.queryDict = this.$route.query;
// 发送axios请求
},
template: `<div><h2>{{title}}</h2><div>当前请求的数据 {{paramDict}} {{queryDict}}</div></div>`
}
4.4 路由嵌套
const router = new VueRouter({
routes: [
{
path: '/pins/',
component: Pins,
children: [
{
// 当 /pins/hot 匹配成功，
// Hot组件 会被渲染在 Pins 的 <router-view> 中
path: 'hot',
component: Hot
},
{
// 当 /pins/following 匹配成功，
// Following组件 会被渲染在 Pins 的 <router-view> 中
path: 'following',
component: Following
}
]
}
]
})如果我们希望父组件展开会有一个默认子路由匹配
const router = new VueRouter({
routes: [
{
path: '/pins/',
component: Pins,
children: [
{path: '',
component: Hot
},
{
path: 'hot',
component: Hot
},
{
// 当 /pins/following 匹配成功，
// Following组件 会被渲染在 Pins 的 <router-view> 中
path: 'following',
component: Following
}
]
}
]
})
4.5 编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
- router.push
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }}) //
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})- router.replace
// 字符串
router.replace('home')
// 对象
router.replace({ path: 'home' })
// 命名的路由
router.replace({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.replace({ path: 'register', query: { plan: 'private' }})
# 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。- router.go 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)4.6 导航守卫
在基于vue-router实现访问跳转时，都会执行一个钩子。const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next() 继续向后执行
// next(false) 中断导航，保持当前所在的页面。
// next('/') next({path:'/'}) next({name:'Login'}) 跳转到指定页面
})router.beforeEach((to, from, next) => {
// 如果已登录，则可以继续访问目标地址
if (sessionStorage.getItem('isLogin')) {
next();
return;
}
// 未登录，访问登录页面
if (to.name === "Login") {
next();
return;
}
// 未登录，跳转登录页面
// next(false); 保持当前所在页面，不跳转
next({name: 'Login'});
})
5.vue3-cookies
官网：https://github.com/KanHarI/vue3-cookies
安装
npm install vue3-cookies --savemain.js文件中引入
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueCookies from 'vue3-cookies'
createApp(App).use(store).use(router).use(VueCookies).mount('#app')使用
import {useCookies} from 'vue3-cookies'
const {cookies} = useCookies();
cookies.set("ts", "123123", "10s")
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
