本文配套項目地址.javascript
因爲在 javascript 中存在如下等式 func.prototype === new func().__proto__
,且 vue 組件中的 this 爲 Vue 的實例,故可使用如下方法爲 Vue 添加方法.vue
Vue.prototype.$axios = Axios;
java
在啓動入口增長 axio 後,組件中使用 axio 不須要再進行 import 操做.例如:webpack
this.$axios .get("product/region") .then(this.$resp(res => {})) .catch(err => console.log(err)); },
定義須要掛載的方法ios
// 請求阿里oss圖片的配置參數 func.install = function(Vue, options) { Vue.prototype.$OSSTail = function(url) { if (!url) { return; } return url.split("?")[0] + "?x-oss-process=image/resize,w_600"; }; };
在入口文件中引入 funcgit
Vue.use(func);
而後就能夠在組件中使用this.$OSSTail()
啦.github
axios 用於發送 http 請求,返回 promise.web
在一個項目中請求地址一般都有些統一的配置,將這些配置提取出來能夠增長代碼的複用性.vue-router
Axios.defaults.baseURL = "/api/v1.0/"; Axios.defaults.headers.post["Content-Type"] = "application/json"; ...
通常先後端交互須要進行身份認證,這裏以 JWT 爲例,經過設置請求鉤子爲每一個請求添加一個 header. 而後監控每一個響應,當有 token 返回時,將 token 存入 localStorage.vuex
/* 請求攔截器 */ Axios.interceptors.request.use( function(config) { // 每次請求時會從localStorage中獲取token let token = Storage.localGet("token"); if (token) { // 把token加入到默認請求參數中 token = token.replace(/'|"/g, ""); config.headers.common["Authorization"] = token; } return config; }, function(error) { return error; } ); /* 響應攔截器 */ Axios.interceptors.response.use( function(response) { if (response.data.code === -1) { // 刪除已經失效或過時的token(不刪除也能夠,由於登陸後覆蓋) Storage.localRemove("token"); // 設置登錄後跳轉頁面 store.commit("set_jump", router.currentRoute.name); // 跳轉到登陸頁 router.replace({ path: "/login" }); } else if (response.data.token) { // 判斷token是否存在,若是存在說明須要更新token Storage.localSet("token", response.data.token); } return response; }, function(error) { return error; } );
實例化 Router 對象
export default new Router({ routes: [ { path: "/", name: "index", component: () => import("./views/Index.vue"), meta: { keepAlive: true } } ] });
入口處掛載
new Vue({ router, store, render: h => h(App) }).$mount("#app");
路由中 meta 添加自定義標識,如上例, { keepAlive: true }
根據條件使用 keepalive 組件進行緩存
如下示例表示當路由 meta 中 keepAlive 項爲 true 時則進行緩存,不然正常處理.
<template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template>
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。當不一樣組件中須要共享狀態,通常會用到它. 例如本例中登陸後跳轉地址.
全局一個 store 對象
export default new Vuex.Store({ state: { jump: "index", // 登錄後跳轉路由 }, // set state mutations: { set_jump(state, page) { state.jump = page } }, // Action 提交的是 mutation,而不是直接變動狀態。 // Action 能夠包含任意異步操做。 actions: { } })
調用
// 更改狀態 this.$store.commit("set_jump", router.currentRoute.name); // 獲取狀態 this.$store.state.jump;
<keep-alive> <loading></loading> </keep-laive>
keep-alive 是 Vue 提供的一個抽象組件,用來對組件進行緩存,從而節省性能,因爲是一個抽象組件,因此在頁面渲染完畢後不會被渲染成一個 DOM 元素.
當組件在 keep-alive 內被切換時組件的 activated
、deactivated
這兩個生命週期鉤子函數會被執行.
<keep-alive include="bookLists,bookLists"> <router-view></router-view> </keep-alive> <keep-alive exclude="indexLists"> <router-view></router-view> </keep-alive>
見 vue-router 一節.
子組件定義 props:list
項,props 中全部的項目都會被轉化爲組件的屬性,能夠用 this 調用.例如:
export default { props: ["product_type", "region_type"], methods: { get_region() { return this.product_type; } } }
父組件定義 props 中對應的屬性
<Product product_type="微留學" region_type="國內" />
本例中導航欄是父組件,導航欄中的每一項是一個子組件.
父組件中調用子組件時傳入一個事件
<template> <Item :txt="item.txt" @change="getVal" // 自定義的事件 /> <template>
子組件觸發事件
this.$emit("change", params);
父組件調用子組件時能夠傳入一些基本類型的值,可是沒法傳入一個/一組組件做爲參數;插槽的做用就是傳入子組件一個/一組組件做爲參數.
位置插槽
命名插槽
做用域插槽
vue-cli3隱藏了webpack的配置.如需增長自定義配置項,須要在根目錄(與package.json同級)新增配置文件vue.config.js
.
具體配置見 全局-cli-配置.
module.exports = { devServer: { proxy: { "/api/v1.0": { target: "http://glocalschool.killf.info", ws: true, changeOrigin: true } } } };