vue 常用插件

使用 Vue 脚手架 vue cli 创建新项目

在全局已安装脚手架工具条件下：

vue create myProject （项目文件夹名）
cd myProject （进入文件夹）
npm run serve （启动项目）

vue 常用配置

1. vue-router

• 安装

npm install vue-router

• 引用

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2. vuex

• 安装

npm install vuex --save

• 引用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

3. axios

• 安装

npm install axios

• 引用

import Vue from 'vue'
import axios from 'axios'

Vue.use(axios)

4. element-ui

• 安装

npm i element-ui -S

• 引用

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

5. Vant

• 安装

npm i vant -S

• 引用

import Vue from 'vue'
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

6. vConsole

• 安装

npm install vconsole --save-dev

• 引用

// 初始化
var vConsole = new VConsole();
console.log('Hello world');

7. Lodash

• 安装

npm i --save lodash

• 引用

import _ from 'lodash'

8. image-conversion

• 安装

npm i image-conversion --save

• 引用

import * as imageConversion from 'image-conversion';
或按需引入
import {compress, compressAccurately} from 'image-conversion';

• 例子

<input id="demo" type="file" onchange="view()">

// 压缩到 200kb 以下
function view(){
  const file = document.getElementById('demo').files[0];
  console.log(file);
  imageConversion.compressAccurately(file,200).then(res=>{
    //The res in the promise is a compressed Blob type (which can be treated as a File type) file;
    console.log(res);
  })
}

// 异步压缩
async function view() {
  const file = document.getElementById('demo').files[0];
  console.log(file);
  const res = await imageConversion.compressAccurately(file,200)
  console.log(res);
}

// accuracy 图像压缩精度大小，范围0.8-0.99，默认为0.95
// 这意味着如果图片大小设置为1000Kb并且精度为0.9，图像与压缩结果一致900Kb-1100Kb被认为是可接受的
function view(){
  const file = document.getElementById('demo').files[0];
  console.log(file);
  imageConversion.compress(file,0.9).then(res=>{
    console.log(res);
  })
}

9. vxe-table

• 安装

npm install xe-utils vxe-table

• 引用

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)

// 给 vue 实例挂载全局窗口对象
 Vue.prototype.$XModal = VXETable.modal

10. 其他开发工具及常用插件

• 安装 sass-loader、 node-sass、 webpack
• npm install sass-loader node-sass webpack --save-dev
• "file-saver":如果你需要保存较大的文件，不受 blob 的大小限制或内存限制，可以看一下更高级的 StreamSaver.js, 它使用强大的 stream API，可以将数据直接异步地保存到硬盘。支持进度、取消操作以及完成事件回调。
• "js-cookie":轻量级JS Cookie插件
• "nprogress": 页面加载进度条
• "xlsx": 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。
• "sass-loader": scss加载器，scss或sass编译成css
• "babel-polyfill":js兼容
• "lodash": 它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数
• "vue-amap": 基于Vue 2.0和高德地图的地图组件。
• "vue-qart": 实现二维码
• "vue-keep-scroll": 一个Vue.JS插件指令，用于在分离时记住元素滚动位置
• "vue-scroller": vue可以记录组件滚动位置等
• "cross-spawn": 解决跨平台开发的一些问题，比如mac和Windows的差异
• "node-sass": Node-sass是一个库，它将Node.js绑定到LibSass(流行样式表预处理器Sass的C版本)
• "ora": 优雅的终端转轮 给终端显示动画等
• "postcss-pxtorem": 一个用于PostCSS的插件，它可以从像素单元生成rem单元
• "vue-loader": 这是一个基于样式加载器的fork。与style-loader类似由于这是作为一个依赖项包含的，并且在vue-loader中默认使用，所以在大多数情况下，不需要自己配置这个加载器。
• lib-flexible 用于设置 rem 基准值