【前端】常用的一些架子和方法

一些乱七八糟的架子

Axios

牌面.jpg

官网：起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

1	npm install axios

方法

const axios = require('axios');
// Axios
axios.get(`url`)
    .then(response => {
    // response.data
})
    .catch(function (error) {
    // 错误所执行的
})
    .then(function () {
    // 总会执行的
})

Vue Cli

Vue的官方脚手架

官网：介绍 | Vue CLI (vuejs.org)

1	npm install -g @vue/cli

创建项目（只可以用小写）

1	vue create hello

Vue Router

Vue路由 Vue 2.0 只能用 Vue router 3

官网：入门 | Vue Router (vuejs.org)

1	npm install vue-router@3

Vue-Cookies

增删改查Cookie的插件

项目地址：alfhen/vue-cookie: A Vue.js plugin for manipulating cookies (github.com)

1	npm install vue-cookies --save

引入

1
2
3

import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

使用方法

// 设置cookie
this.$cookies.set( keyName, keyValue, time); // 例子："username","114514","24h"
// 获取cookie的值
this.$cookies.get( keyName );
// 删除cookie
this.$cookies.remove( keyName );
// 检查cookie是否存在
this.$cookies.isKey( keyName );
// 获取所有cookie 返回格式为数组
this.$cookies.keys();

Bootstrap-Vue

适配Vue的bootstrap 禁止使用jquery

官网：BootstrapVue (bootstrap-vue.org)

Bootstrap中文文档（部分要看上面官网）：简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网 (bootcss.com)

1	npm install vue [email protected] bootstrap-vue

animate

超好用的动画插件

官网 Animate.css | A cross-browser library of CSS animations.

1	npm install animate.css --save

引入

1	import 'animate.css';

vue-photo-preview

点击图片放大预览的插件

项目地址：826327700/vue-photo-preview: 基于photoswipe的vue图片预览组件 (github.com)

1	npm install vue-photo-preview --save

引入

import Preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let option = {
    maxSpreadZoom: 1, // 控制预览图最大的倍数，默认是2倍，我这里改成了原图
    fullscreenEl: false, //控制是否显示右上角全屏按钮
    closeEl: true, //控制是否显示右上角关闭按钮
    tapToClose: true, //点击滑动区域应关闭图库
    shareEl: false, //控制是否显示分享按钮
    zoomEl: true, //控制是否显示放大缩小按钮
    counterEl: false, //控制是否显示左上角图片数量按钮
    arrowEl: true,  //控制如图的左右箭头（pc浏览器模拟手机时）
    tapToToggleControls: true, //点击应切换控件的可见性
    clickToCloseNonZoomable: true //点击图片应关闭图库，仅当图像小于视口的大小时
}
Vue.use(Preview, option)