vue 第三方插件
vue-loader 解析vue的第三方模塊
webpack
webpack-cli
vue-template-compiler模板解析
import Vue from "vue";//vue
import App from "./components/app.vue"http://app.vue
import Router from 'vue-router'//路由
import router from '../config/router.js'//路由配置項(xiàng)
import Mintui from 'mint-ui'//手機(jī)組件
import axios from 'axios'//代理
import { builtinModules } from "module";
webpack:
const path = require("path"),//拼接路徑 jion reslove
webpack = require("webpack"),//模塊打包工具
VueLoaderPlugin = require("vue-loader/lib/plugin"),//node文件夾里面的解析插件
HtmlPlugin = require("html-webpack-plugin"),//加載頁(yè)面中鏈接資源插件
{ CleanWebpackPlugin } = require("clean-webpack-plugin");//刪除舊文件保留新文件插件
new Vue({})實(shí)例化
el:""掛載元素
.refs.name 獲取帶有name標(biāo)簽的真實(shí)dom節(jié)點(diǎn)
.emit("comeSon",this.數(shù)據(jù))
父：標(biāo)簽@=事件函數(shù) 發(fā)布訂閱
兄弟組件通訊
bus.js bus.發(fā)布訂閱
爺孫通訊
provide(){方法return{屬性：this. 屬性：值.}}爺
inject:["屬性"] 孫
<router-link to=""></router-link>相當(dāng)于a標(biāo)簽
<template></template>vue模板
<style lang=stylus socped></style>//socped局部樣式
<slot></slot> 接收組件標(biāo)簽中的信息 普通插槽
<span slot="名稱"> <span name="名稱">調(diào)用 具名插槽
<span slot-scope="">變量本頁(yè)面<slot :名稱=""></span>作用域插槽
<router-view></router-view>所有的路由組件都在里面
<router-link to=""><router-link>相當(dāng)于a標(biāo)簽
<transition :name="></transition>動(dòng)畫屬性設(shè)置
路由配置
vue-router第三方模塊
import Router from "vue-router"http://引入路由
import 組件名 form "組件地址"
const router=new Router({})實(shí)例化路由
mode:"history"http://路由跳轉(zhuǎn)方式
routes:[]路由配置
{path:"/"路徑展示
component:組件名//注冊(cè)組件
name:""給路由命名
meta:{設(shè)置檢索等等組件的唯一標(biāo)識(shí)}
redirect:""路徑地址 重定向}
base:"/地址/"當(dāng)前路由都在base配置的地址之下
scrollBehavior(to,from){//跳轉(zhuǎn)時(shí)獲取to//在哪from//去哪}前進(jìn)后退按鈕滾動(dòng)
linkActiveClass=""路由名重新定義 當(dāng)前選中 class名字
linkExactActiveClass=""路由名重新定義 精確進(jìn)入
export default router向外暴露
路由守衛(wèi)
全局
next(“可以傳地址參數(shù)”)向下執(zhí)行或者跳轉(zhuǎn)指定頁(yè)面
to當(dāng)前到達(dá)路徑
from上次路徑
router.beforeEach((to，from,next)=>{路由跳轉(zhuǎn)前的鉤子函數(shù)})
router.beforeResolve((to，from,next)=>{路由跳轉(zhuǎn)前的鉤子函數(shù) 后執(zhí)行})
router.afterEach((to,from)=>{})路由跳轉(zhuǎn)之后的鉤子函數(shù)
組件內(nèi)守衛(wèi)
beforeRouteEnter((to船庇，from,next)=>{next(x=>{})} 鉤子執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
beforRouteUpdata 動(dòng)態(tài)路由更新鉤子函數(shù)
beforRouteLeave 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
vue.keep-alive 防止重復(fù)請(qǐng)求刷新 并保留狀態(tài)
name:"name"起名字
<keep-alive include="name">配置多個(gè)不刷新</keep-alive>
<keep-alive exclude="name">排除哪個(gè)</keep-alive>
component:require(地址).default按需求加載路由組件
name-enter:定義進(jìn)入過(guò)度的開始狀態(tài)
name-enter-active定義進(jìn)入活動(dòng)的狀態(tài)
name-enter-to定義進(jìn)入的結(jié)束狀態(tài)
name-leave:定義離開過(guò)去的開始狀態(tài)
name-leave-active定義離開活動(dòng)的狀態(tài)
name-leave-to:定義離開的結(jié)束狀態(tài)
this.route.query拿到快遞的參數(shù)
this.router.push({path:""地址)跳轉(zhuǎn)頁(yè)面
this.el指的是當(dāng)前的元素節(jié)點(diǎn)
this.axios=axios;掛載axios
this.axios("地址"侣监，{//get 請(qǐng)求
params{參數(shù)}
}).then(res=>{}).catch(err=>{})拿數(shù)據(jù)
npm i koa2-cors -s 第三方插件 導(dǎo)入 app.js 注冊(cè) 解決跨域
在請(qǐng)求或響應(yīng)被 then 或 catch 處理前攔截它們鸭轮。
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
return config;// 在發(fā)送請(qǐng)求之前做些什么
}, function (error) {// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
});即可以用在請(qǐng)求動(dòng)畫等。
vuex狀態(tài)管理器new Vuex.Store({})
state:{}//存儲(chǔ)數(shù)據(jù)
actions:{},//異步行為事件 store.commit(''方法",params)
getters:{},//計(jì)算屬性$sotre.getters.fun()
modules:{}//分模塊管理