第三方插件可以增强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' // 使用axios
axios.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 }
导航拦截器的使用
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 --save
3.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的使用
简而言之就是项目只有一个页面。
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 router
或者用如下命令，会安装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 router
2. 配置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.
官网：https://github.com/KanHarI/vue3-cookies
安装
npm install vue3-cookies --save
main.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")
