商城類vue項目實戰經驗積累
一、項目搭建相關
1、 在當前目錄中使用 vue init webpack (或在父級目錄中使用vue init webpack 項目名稱)
2、在當前項目目錄時，直接使用npm install ，未在當前目錄時，需先進入到當前項目目錄中使用npm install
3、npm run dev 運行項目
注意：在創建項目時，保留router配置，ESlint根據實際需求選擇是否添加
二、項目成功搭建後的基礎配置
1、打包後可正常訪問項目的基礎配置
前言：vue項目在完成後，使用npm run build打包後，訪問index.html頁面會報錯且不能查看頁面效果，所以需要進行進行相關配置。
報錯如下：
配置步驟：
1)、在當前項目中找到config目錄下的index.js文件。
2)、在模塊導出設置中存在dev對象及build對象，其相對應的是生產環境配置及打包相關配置，在打包相關配置中，找到assetsPublicPath字段將其值 / 改爲 ./，意思是將打包後static相關文件的路徑從絕對路徑改爲了相對路徑。
3)、在dev對象設置中可對訪問地址及端口進行配置。
！！！注意： 該種設置只能在路由爲hash模式下才能修改，使用history模式會產生組件掛載不上的問題。
2、如何去掉url中#
前言：vue2.0項目中默認使用的是hash模式。即使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載，因爲對於正常的頁面來說，更換URl一定是會導致頁面的更換的， 而只有更換URL中的查詢字符串和hash值的時候纔不會重新加載頁面。
history模式介紹：這種模式充分利用了history.pushState API來完成URL的跳轉而不需要重新加載頁面。沒有#號。
配置步驟：
1)、在當前項目中找到router目錄下的index.js路由文件，在導出路由中加入mode: 'history’
如圖：
!!!注意：這種模式的路由在正式部署時，需要後臺配置的支持：詳情請看vue-router官網.
3、添加路由守衛
前言：在進入每一個組件時，我們都需要進行對登陸狀態的判斷，如果未登錄就需要讓其返回到登陸頁去登陸，這裏就需要進行路由守衛的配置了。( TT說多了全是淚呀~,本身小白，對這塊理解的不夠，竟然會在每一個組件渲染前[created]中進行sessionStrong中進行登陸狀態的判定。)
配置：在項目的router目錄下的index.js中進行路由跳轉的相關配置。如圖：
)
學習地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
4、路由component引用的es6簡化
前言：在平常的開發中我們一般都是先導入組件聲明組件名，然後再賦值給router中component，但其過於繁瑣，所以可使用es語法進行簡化書寫。
配置步驟：
1)、在項目的router目錄下的index.js中進行路由跳轉的相關配置
2)、以往的書寫習慣。
// 導入註冊組件
import Register from '@/components/pages/Register';
// 在router中引用
export default new Router({
routes: [
{
path: '/register',
name: '註冊頁',
component: Register
},
]
});
3)、簡化：
{ // 【註冊頁面】
path: '/registerPage',
name: 'registerPage',
component: e => import('@/views/Register')
},
5、vuex狀態管理
前言：在項目中總有一部分數據是各個組件都需要用到的，如登陸狀態、用戶信息等等…這塊我們我們就需要用到vuex了。
6、第三方插件axios的引用及封裝
前言：vue在請求後臺接口的插件常用的有vue-resource和axios，其中vue-resource是官方推出的插件庫，而axios是第三方推出的插件庫。該項目中使用的是axios。雖然該插件使用起來已經相當簡潔，但我們在實際開發中 仍需要根據項目進行封裝。
相關配置：
1)、axios的導入：
npm install axios --save
或 npm i axios -S
使用淘寶鏡像：
npm install axios --save --registry=https://registry.npm.taobao.org (使用淘寶鏡像源)
或 cnpm install axios --save
2)、如果不進行封裝，可直接在模板中導入，如下：
// 在script中進行導入
import axios from 'axios';
/* 在methods中的使用方式——get */
axios.get(‘接口地址’)
.then(res=>{
// 請求成攻
}).catch(err=>{
// 請求失敗
});
/* 在methods中的使用方式——post */
axios.post('接口地址',{
// 參數
}).then(res=>{
// 請求成功
}).catch(err=>{
// 請求失敗
});
3)、進行封裝
- 在當前項目中的src文件中創建http.js文件。
- http.js文件相關配置：
// 1、導入axios插件
import axios from "axios";
import import { Spin } from "iview"; // 導入請求發送時狀態的組件
// 2、基礎配置
axios.defaults = Object.assign(axios.defaults,{
base: 'http://localhost:8080/api'; // 進行接口基礎路徑配置(該處有設置本地代理)
headers: { // 添加請求頭部所需類型生命
"Content-Type": "application/json",
}
});
// 3、添加請求攔截器
axios.interceptors.request.use(
config => {
let isUser = sessionStorage.userInfo; // 該處有引用sessionstrong存值
if (isUser) {
config.headers.accessToken = JSON.parse(isUser).user.token; // 配置通行密鑰
}
// iview loading 該處配置請查看引入UI框架的具體配置實例
Spin.show({
render: (h) => {
return h('div',[
h('Icon',{
'class': 'demo-spin-icon-load',
props: [
type: 'ios-loading',
size: 14
}
]),
h('div','努力加載中...');
]);
}
});
return config;
},
error => {
return Promise.reject(error);
}
);
// 4、添加響應攔截器
axios.interceptors.response.use(
response => {
if( response.status === 200 ){ // 響應接收成功
if( response.data ){
setTimer(() => {
Spin.hide();
},1000);
switch( response.data.code ){
case 100: // 響應正常
return response.data.data;
default:
return Promise.reject(response); // 失敗，回調
}
} else {
return response;
}
} else { // 響應錯誤原因
alert( `網絡錯誤!(${response.status})` );
}
},
err => {
return Promise.reject(error);
}
);
// 5、導出
export default axios;
- 在main.js中進行全局引用
// 從http.js中導入axios
import axios from './http'
// vue實例全局掛載
Vue.prototype.$axios = axios;
- 在組件中進行使用
// get方法
this.$axios.get('接口地址')
.then(res => {
// 請求成功
}).catch( err => {
// 請求失敗
} );
// post方法
this.$axios.post('接口地址',{
參數
}).then(err => {
// 請求成功
}).catch(err => {
// 請求失敗
})
！！！注意： 響應攔截器應該根據實際數據結構進行修改。
7、本地請求接口時的跨域配置（反向代理）
前言：說多了都是淚呀~，弱弱的問一下，這不應該是後臺進行配置的麼TT。算了，廢話不多。在請求接口時，在後臺沒有處理跨域配置時，就需要我們自行進行調整的，不然絕對一臉的懵逼。
相關配置：
1)、在項目目錄中找到config文件夾下的index.js文件中的proxyTable，並且進行如下配置：
proxyTable: {
'/api':{
target: 'http://172.112.16.201:8787', // 接口的基礎地址
changeOrigin: true,
pargPewrite: {
'^/api':''
}
}
}
！！！注意1：所設置的請求基礎地址後，在https.js中進行接口的基礎地址配置需要填寫本地請求路徑 base: ‘http://localhost:8080/api’;
！！！注意2：在進行配置後需要進行項目從啓才能生效。