面顯示
頭部左右兩邊可以通過slot卡槽去處理
底部導航顯示與否可以通過路由里面的meta屬性進行配置
返回上一級頁面
$router.back()
$router:路由器對象，包含一些操作路由的功能函數，來實現編程式導航（路由跳轉）
$route:當前路由對象，一些當前路由信息數據的容器，path/meta/query/params
異步請求數據
vue異步請求數據詳細介紹
axios請求數據封裝
/*
封裝請求函數
返回值：promise對象
*/
import axios from 'axios'
let ajax = (url,data = {},type = 'GET') => {
return new Promise((resolve,reject) => {
let promise;
if(type == 'GET'){
let dataString = '';
Object.keys(data).forEach((key)=>{//組裝url后面拼接的請求參數
dataString += `&${key}=${data[key]}`
})
if(dataString != ''){
dataString = dataString.substring(0,dataString.lastIndexOf('&'))
url = url + '?' +dataString
}
promise = axios.get(url)
}else{
promise = axios.post(url,data)
}
promise.then((response)=>{
resolve(response.data)
}).catch((err)=>{
reject(err)
})
})
}
export default ajax;接口封裝
/*
接口封裝
*/
import ajax from './ajax.js'
const baseUrl = '/api'
export const getCategory = () => ajax(baseUrl + '/index_category')組件中調用
import {getCategory} from './api/index.js'
async mounted(){
const result = await getCategory()
console.log(result)
}跨域請求
上面請求數據可能涉及到跨域，兩種解決方法，1、后台配置跨域，2、配置代理蒙騙瀏覽器config–>index.js
//配置代理
proxyTable: {
'/api':{
target:'http://localhost:4000/',
changeOrigin:true,
pathRewrite:{
'/api':''
}
}
}Vuex狀態管理
vuex詳解
頁面上調用actions方法，促使mutations去改變state中的數據
動態獲取數據之后swiper輪播圖無法滑動
swiper初始的時候是靜態資源，請求數據的時候頁面還沒有更新，資源沒有配置好。兩種解決方法：
1.將swiper的配置文件放到updated中即可，頁面更新之后再去配置
mounted(){
this.$store.dispatch('getCategory')
},
updated(){
new Swiper('.swiper-container',{
loop: true, // 循環模式選項
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
}
})
}2.采用$nextTick，獲取數據之后，頁面跟新立即調用
watch:{
category(val){
this.$nextTick(()=>{//this.$nextTick()將回調延遲到下次DOM更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。
new Swiper('.swiper-container',{
loop: true, // 循環模式選項
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
}
})
})
}
}數據綁定
已綁定數據新增屬性問題
對於已經聲明綁定了的數據，在新增屬性的時候，如果直接使用obj.a去新增，數據可以增加，但是無法綁定顯示到頁面上。
需要通過Vue.set方法來處理，傳3個參數
Vue.set(綁定對象,新增屬性,屬性值)
路由
緩存路由組件對象
<keep-alive>
<router-view/>
</keep-alive>復用路由組件對象，復用路由組件獲取的后台數據
通過replace屬性解決路由回退問題
<router-link to="/shop/shopgoods" replace>點餐</router-link>默認路由添加方式為push，這樣就會導致點擊頁面回退的時候不能直接回退到跳進時的頁面，可以使用replace屬性來解決這一問題
路由組件懶加載
打包好的Vue項目，JS文件包含所有項目的內容，我們在進入頁面的時候只需要加載當前頁面路由的js即可，不需要把所有直接加載出來，在路由文件中修改引入配置，用函數的方式來實現，進入路由的時候再去引用相應的文件。
/*
import Msite from '@/pages/Msite/Msite.vue'
import Search from '@/pages/Search/Search.vue'
import Order from '@/pages/Order/Order.vue'
import Profile from '@/pages/Profile/Profile.vue'
*/
//路由組件懶加載
const Msite = () => import('@/pages/Msite/Msite.vue')
const Search = () => import('@/pages/Search/Search.vue')
const Order = () => import('@/pages/Order/Order.vue')
const Profile = () => import('@/pages/Profile/Profile.vue')
這樣一來，不同路由模塊會產生不同的JS文件，在點擊路由之后引入對應的即可
打包文件分析與優化
打包可視化
npm run build --report
可視化頁面中模塊所占頁面的大小就是打包之后文件所占內存的大小，對於一些占比過大的部分就需要進行優化了。
打包出錯
報錯1：
ERROR in static/js/vendor.xxxxx.js from UglifyJs
原由：
腳手架安裝項目
修改了npm install下載插件的代碼，babel無法解析
在build/webpack.base.conf.js添加需要被再次解析的文件
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts'),resolve('node_modules/vue2-or