vue 第三方插件
vue-loader 解析vue的第三方模块
webpack
webpack-cli
vue-template-compiler模板解析
import Vue from "vue";//vue
import App from "./components/app.vue"//app.vue
import Router from 'vue-router'//路由
import router from '../config/router.js'//路由配置项
import Mintui from 'mint-ui'//手机组件
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"),//加载页面中链接资源插件
{ CleanWebpackPlugin } = require("clean-webpack-plugin");//删除旧文件保留新文件插件
new Vue({})实例化
el:""挂载元素
.refs.name 获取带有name标签的真实dom节点
.emit("comeSon",this.数据)
父：标签@=事件函数 发布订阅
兄弟组件通讯
bus.js bus.发布订阅
爷孙通讯
provide(){方法return{属性：this. 属性：值.}}爷
inject:["属性"] 孙
<router-link to=""></router-link>相当于a标签
<template></template>vue模板
<style lang=stylus socped></style>//socped局部样式
<slot></slot> 接收组件标签中的信息 普通插槽
<span slot="名称"> <span name="名称">调用 具名插槽
<span slot-scope="">变量本页面<slot :名称=""></span>作用域插槽
<router-view></router-view>所有的路由组件都在里面
<router-link to=""><router-link>相当于a标签
<transition :name="></transition>动画属性设置
路由配置
vue-router第三方模块
import Router from "vue-router"//引入路由
import 组件名 form "组件地址"
const router=new Router({})实例化路由
mode:"history"//路由跳转方式
routes:[]路由配置
{path:"/"路径展示
component:组件名//注册组件
name:""给路由命名
meta:{设置检索等等组件的唯一标识}
redirect:""路径地址 重定向}
base:"/地址/"当前路由都在base配置的地址之下
scrollBehavior(to,from){//跳转时获取to//在哪from//去哪}前进后退按钮滚动
linkActiveClass=""路由名重新定义 当前选中 class名字
linkExactActiveClass=""路由名重新定义 精确进入
export default router向外暴露
路由守卫
全局
next(“可以传地址参数”)向下执行或者跳转指定页面
to当前到达路径
from上次路径
router.beforeEach((to，from,next)=>{路由跳转前的钩子函数})
router.beforeResolve((to，from,next)=>{路由跳转前的钩子函数 后执行})
router.afterEach((to,from)=>{})路由跳转之后的钩子函数
组件内守卫
beforeRouteEnter((to，from,next)=>{next(x=>{})} 钩子执行前，组件实例还没被创建
beforRouteUpdata 动态路由更新钩子函数
beforRouteLeave 导航离开该组件的对应路由时调用
vue.keep-alive 防止重复请求刷新 并保留状态
name:"name"起名字
<keep-alive include="name">配置多个不刷新</keep-alive>
<keep-alive exclude="name">排除哪个</keep-alive>
component:require(地址).default按需求加载路由组件
name-enter:定义进入过度的开始状态
name-enter-active定义进入活动的状态
name-enter-to定义进入的结束状态
name-leave:定义离开过去的开始状态
name-leave-active定义离开活动的状态
name-leave-to:定义离开的结束状态
this.route.query拿到快递的参数
this.router.push({path:""地址)跳转页面
this.el指的是当前的元素节点
this.axios=axios;挂载axios
this.axios("地址"，{//get 请求
params{参数}
}).then(res=>{}).catch(err=>{})拿数据
npm i koa2-cors -s 第三方插件 导入 app.js 注册 解决跨域
在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
return config;// 在发送请求之前做些什么
}, function (error) {// 对请求错误做些什么
return Promise.reject(error);
});即可以用在请求动画等。
vuex状态管理器new Vuex.Store({})
state:{}//存储数据
actions:{},//异步行为事件 store.commit(''方法",params)
getters:{},//计算属性$sotre.getters.fun()
modules:{}//分模块管理
网友评论