lodash

javascript使用工具库

1	npm install lodash --save

element-plus

UI组件

npm install element-plus --save
```  
  
```javascript
//main.js
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
app.use(ElementPlus)
```  
  
  
# vue-axios   
联网  
```shell
npm install --save axios vue-axios

//main.js
import VueAxios from 'vue-axios';
import axios from 'axios';
app.use(VueAxios, axios)
```  
```javascript
//可以统一配置一些统一参数
const netClient = this.axios.create({
    baseURL:'',
    timeout:10000,
    headers:{'token':''},
});
netClient.get('').then((response)=>{});

//也可以修改defaults参数
this.axios.defaults.baseURL = '';

//也可以单独请求
this.axios.get('').then((response)=>{});

请求时配置的参数优先级 > defaults参数 > axios默认配置

可配置请求参数：

url
method （默认’get’）
baseURL
transformRequest （拦截请求，传入data、headers，修改后返回data）
transformResponse （拦截返回，传入data，修改后返回data）
headers
paramsSerializer （自定义参数序列化方法）
data (要发送的数据)
timeout
withCredentials (跨域请求是否需要凭证)
auth (设置用户信息)
responseType (响应数据的类型，默认’json’)
responseEncoding （响应数据的编码方式，默认’utf8’）
maxContentLength （响应的最大字节数）
maxBodyLength (响应内容的最大字节数)
validateStatus （自定义状态是成功或失败，传入status状态码，返回true/false）

返回的数据：

data
status
statusText
headers
config （请求时的配置信息）
request （请求实例）

拦截器

//设置拦截器
let requestInterceptor =  this.axios.interceptors.request.use((config)=>{
    //TODO一些发起请求前的统一处理
    return config;
},(error)=>{
    //请求出错
    return Promise.reject(error);
});
let responseInterceptor =  this.axios.interceptors.response.use((response)=>{
    //TODO一些返回的统一处理
    return response;
},(error)=>{
    //请求出错
    return Promise.reject(error);
});
//之后的请求已经带有拦截器
this.axios.get('').then((response)=>{});
//移除指定拦截器
this.axios.interceptors.request.eject(requestInterceptor);
```  
  
  
# vue-router  
```shell
npm install vue-router@4 -s
```  
```html  
<!-- 导航栏 -->
<router-link to="/helloword">欢迎</router-link>
<br />
<router-link to="/weather">天气</router-link>
<!-- 页面内容 -->
<router-view></router-view

import { createRouter, createWebHashHistory } from 'vue-router';

import HelloWorld from './components/HelloWorld.vue'
import WeatherPage from './components/WeatherPage.vue'
import User from './components/UserPage.vue'

const routes = [
    { path: '/helloword', component: HelloWorld },
    { path: '/weather', component: WeatherPage },
    //请求链接：/user/名字/123。页面取值：this.$route.params.username
    { path: '/user/:username/:id', component: User },
];

const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
})

mounted方法只有在页面销毁重建才会调用。
如果同一个页面参数不同跳过去，需要实现beforeRouteUpdate。

//同一页面参数不同时调用（路由更新），但首次进入时不会调用。
//to.params.username。新参数从to取。
beforeRouteUpdate(to, from) {
    console.log(to, from);
},

嵌套路由

//在User页面内嵌<router-view></router-view>用户塞入子页面
//可以通过“/user/用户名/111/friends/6”访问
const routes = [
    {
        path: '/user/:username/:id', 
        component: User,
        children: [
            { path: 'friends/:count', component: Friends },
        ],
    },
];

基础组件使用

lodash

element-plus

Tags