分享一个朋友的人工智能教程。比较通俗易懂,风趣幽默,感兴趣的朋友能够去看看。
用于开发调试Vue.js的一个必备插件。能够在Chrome中的扩展程序中直接安装,也能够本地文件的方式安装。
javascript
当路由切换事会在浏览器的顶部出现一个蓝色进度条用于表示路由切换的进度,并在又上角有个蓝色loading的动画。css
通常状况下切换到目标路由时,在目标路由中的生命周期中可能会作一些处理(如请求接口等),这些操做会有必定的耗时,因此使用进度条来表示路由切换的进度。html
CSDN在切换路由时就有这种效果。只不过CSDN的进度条是红色的,右上角没有loading。前端
GitHub: https://github.com/rstacruz/nprogressvue
cnpm install --save nprogress
import NProgress from 'nprogress' import 'nprogress/nprogress.css' // 配置NProgress选项 // NProgress.configure({ }) // 在路由页面跳转使用 router.beforeEach((to, from, next) => { // 开始进度条 NProgress.start() // 继续路由 next() }) router.afterEach(transition => { // 结束进度条 NProgress.done() })
<template> <div> <router-link to="/foo">Go to Foo</router-link> </div> </template>
Foo.vuejava
<template> <div> Foo Vue </div> </template>
在vue中集成echarts能够经过两种方式集成:node
官方示例:https://echarts.baidu.com/examples/webpack
1 安装echarts依赖git
cnpm install echarts -S
<template> <div ref="chartOne" :style="{width: '300px', height: '300px'}"></div> </template> <script> // 引入Echarts主模块 let echarts = require('echarts/lib/echarts') // 引入柱状图 require('echarts/lib/chart/bar') // 引入圆饼图 require('echarts/lib/chart/pie') // 引入所需组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/legend') export default { name: 'Foo', // 建立图表一 methods: { createChartOne () { let chartOne = echarts.init(this.$refs.chartOne) chartOne.setOption({ title: { text: '在Vue中使用echarts' }, tooltip: {}, xAxis: { data: ['iOS', 'Vue', 'Java', 'GO'] }, yAxis: {}, series: [{ name: '热度', type: 'bar', data: [5, 6, 9, 6] }] }) } }, mounted () { this.createChartOne() } } </script>
cnpm install vue-lazyload --save
src/main.js 导入import并使用use插件github
import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) // 也能够配置一些选项, 建议使用这种配置方式,配置一些参数 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 })
key | description | default | options |
---|---|---|---|
preLoad |
proportion of pre-loading height(预加载高度比例) | 1.3 |
Number |
error |
src of the image upon load fail(图片路径错误时加载图片) | 'data-src' |
String |
loading |
src of the image while loading(预加载图片) | 'data-src' |
String |
attempt |
attempts count(尝试加载图片数量) | 3 |
Number |
listenEvents |
events that you want vue listen for (想要监听的vue事件) 默认['scroll']能够省略, 当插件跟页面中的动画或过渡等事件有冲突是, 能够尝试其余选项 |
|
Desired Listen Events |
adapter |
dynamically modify the attribute of element (动态修改元素属性) |
{ } |
Element Adapter |
filter |
the image's listener filter(动态修改图片地址路径) | { } |
Image listener filter |
lazyComponent |
lazyload component | false |
Lazy Component |
dispatchEvent |
trigger the dom event | false |
Boolean |
throttleWait |
throttle wait | 200 |
Number |
observer |
use IntersectionObserver | false |
Boolean |
observerOptions |
IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | IntersectionObserver |
<template> <div> <!-- <img v-bind:src="img"> --> <img v-lazy="img"> </div> </template> <script> export default { name: 'HelloWorld', data () { return { img: 'https://avatar.csdn.net/0/F/7/3_vbirdbest.jpg' } } } </script>
cnpm install -S file-saver xlsx xlsx-style cnpm install -D script-loader
Blob.js 文件地址:https://github.com/eligrey/Blob.js
Export2Excel.js
/* eslint-disable */ require('script-loader!file-saver'); require('script-loader!@/vendor/Blob'); require('script-loader!xlsx-style/dist/xlsx.core.min'); require('script-loader!xlsx-style/dist/xlsx.full.min'); import XLSX from 'xlsx' function generateArray(table) { var out = []; var rows = table.querySelectorAll('tr'); var ranges = []; for (var R = 0; R < rows.length; ++R) { var outRow = []; var row = rows[R]; var columns = row.querySelectorAll('td'); for (var C = 0; C < columns.length; ++C) { var cell = columns[C]; var colspan = cell.getAttribute('colspan'); var rowspan = cell.getAttribute('rowspan'); var cellValue = cell.innerText; if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue; //Skip ranges ranges.forEach(function (range) { if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) { for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null); } }); //Handle Row Span if (rowspan || colspan) { rowspan = rowspan || 1; colspan = colspan || 1; ranges.push({ s: { r: R, c: outRow.length }, e: { r: R + rowspan - 1, c: outRow.length + colspan - 1 } }); }; //Handle Value outRow.push(cellValue !== "" ? cellValue : null); //Handle Colspan if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null); } out.push(outRow); } return [out, ranges]; }; function datenum(v, date1904) { if (date1904) v += 1462; var epoch = Date.parse(v); return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000); } function sheet_from_array_of_arrays(data, opts) { var ws = {}; var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } }; for (var R = 0; R != data.length; ++R) { for (var C = 0; C != data[R].length; ++C) { if (range.s.r > R) range.s.r = R; if (range.s.c > C) range.s.c = C; if (range.e.r < R) range.e.r = R; if (range.e.c < C) range.e.c = C; var cell = { v: data[R][C] }; if (cell.v == null) continue; var cell_ref = XLSX.utils.encode_cell({ c: C, r: R }); if (typeof cell.v === 'number') cell.t = 'n'; else if (typeof cell.v === 'boolean') cell.t = 'b'; else if (cell.v instanceof Date) { cell.t = 'n'; cell.z = XLSX.SSF._table[14]; cell.v = datenum(cell.v); } else cell.t = 's'; ws[cell_ref] = cell; } } if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range); return ws; } function Workbook() { if (!(this instanceof Workbook)) return new Workbook(); this.SheetNames = []; this.Sheets = {}; } function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } export function export_table_to_excel(id) { var theTable = document.getElementById(id); var oo = generateArray(theTable); var ranges = oo[1]; /* original data */ var data = oo[0]; var ws_name = "SheetJS"; var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); /* add ranges to worksheet */ // ws['!cols'] = ['apple', 'banan']; ws['!merges'] = ranges; /* add worksheet to workbook */ wb.SheetNames.push(ws_name); wb.Sheets[ws_name] = ws; var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' }); saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "test.xlsx") } export function export_json_to_excel({ multiHeader = [], header, data, filename, merges = [], autoWidth = true, bookType= 'xlsx' } = {}) { /* original data */ filename = filename || 'excel-list' data = [...data] data.unshift(header); for (let i = multiHeader.length-1; i > -1; i--) { data.unshift(multiHeader[i]) } var ws_name = "SheetJS"; var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); // 设置单元格样式 for (var i = 0; i < header.length; i++) { var str = String.fromCharCode((65 + i));//A B C D.... //设备表头样式 var head = str + "1"; ws[head].s = { font: {sz: 12, bold: true, color: {rgb: "000000"}}, alignment: {vertical: "center", horizontal: "center"}, fill: {bgColor: {indexed: 64}, fgColor: {rgb: "FFFF00"}} } // 设置内容样式 for (let j = 2; j < data.length; j++) { var body = str + j; ws[body].s = {font: {sz: 12}, alignment: {vertical: "center", horizontal: "center"}} } } if (merges.length > 0) { if (!ws['!merges']) ws['!merges'] = []; merges.forEach(item => { ws['!merges'].push(item) }) } if (autoWidth) { /*设置worksheet每列的最大宽度*/ const colWidth = data.map(row => row.map(val => { /*先判断是否为null/undefined*/ if (val == null) { return { 'wch': 10 }; } /*再判断是否为中文*/ else if (val.toString().charCodeAt(0) > 255) { return { 'wch': val.toString().length * 2 }; } else { return { 'wch': val.toString().length }; } })) /*以第一行为初始值*/ let result = colWidth[0]; for (let i = 1; i < colWidth.length; i++) { for (let j = 0; j < colWidth[i].length; j++) { if (result[j]['wch'] < colWidth[i][j]['wch']) { result[j]['wch'] = colWidth[i][j]['wch']; } } } ws['!cols'] = result; } /* add worksheet to workbook */ wb.SheetNames.push(ws_name); wb.Sheets[ws_name] = ws; var wbout = XLSX.write(wb, { bookType: bookType, bookSST: false, type: 'binary' }); saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`); }
在alias中增长vendor别名
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', 'vendor': path.resolve(__dirname, '../src/vendor'), '@': resolve('src'), } },
<template> <div> <el-table :data="tableData" :header-cell-style="{'text-align':'center'}" border> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column label="理科"> <el-table-column prop="physics" label="物理"/> <el-table-column prop="chemistry" label="化学"/> <el-table-column prop="biology" label="生物"/> </el-table-column> </el-table> <button @click="handleDownload">导出</button> </div> </template> <script> export default { name: 'ExcelExportExample', data () { return { tableData: [ { name: '张三', physics: 88, chemistry: 99, biology: 66 }, { name: '李四', physics: 88.5, chemistry: 99.5, biology: 66.5 } ] } }, methods: { handleDownload () { import('@/vendor/Export2Excel').then(excel => { const list = this.tableData const props = ['name', 'physics', 'chemistry', 'biology'] let multiHeader = [['姓名', '理科', '', '']] let header = ['', '物理', '化学', '生物'] // s表示start,指定开始的行r和列c // e表示end,指定结束的行r和列c let merges = [ // 理科合并单元格 { s: {c: 1, r: 0}, e: {c: 3, r: 0} }, // 姓名 { s: {c: 0, r: 0}, e: {c: 0, r: 1} } ] const data = list.map(v => props.map(j => v[j])) excel.export_json_to_excel({ multiHeader: multiHeader, merges: merges, header: header, data: data, filename: '学生成绩表', autoWidth: true, bookType: 'xlsx' }) }) } } } </script>
注意:
相关文章:
导入只须要安装xlsx插件
npm install xlsx --save
ExcelImportExample.vue
<template> <div> <input type="file" @change="importFile(this)" id="imFile" style="display: none" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/> <el-button @click="uploadFile()">导入</el-button> <div>{{excelData}}</div> </div> </template> <script> // 引入xlsx var XLSX = require('xlsx') export default { name: 'ExcelImportExample', data () { return { imFile: '', excelData: [] } }, mounted () { this.imFile = document.getElementById('imFile') }, methods: { uploadFile: function () { // 点击导入按钮 this.imFile.click() }, importFile: function () { // 导入excel let obj = this.imFile if (!obj.files) { return } var f = obj.files[0] var reader = new FileReader() let $t = this reader.onload = function (e) { var data = e.target.result if ($t.rABS) { $t.wb = XLSX.read(btoa(this.fixdata(data)), { // 手动转化 type: 'base64' }) } else { $t.wb = XLSX.read(data, { type: 'binary' }) } let json = XLSX.utils.sheet_to_json($t.wb.Sheets[$t.wb.SheetNames[0]]) console.log(typeof json) $t.dealFile($t.analyzeData(json)) // analyzeData: 解析导入数据 } if (this.rABS) { reader.readAsArrayBuffer(f) } else { reader.readAsBinaryString(f) } }, analyzeData: function (data) { // 此处能够解析导入数据 return data }, dealFile: function (data) { // 处理导入的数据 console.log(data) this.imFile.value = '' if (data.length <= 0) { console.log('数据错误') } else { this.excelData = data } }, // 文件流转BinaryString fixdata: function (data) { var o = '' var l = 0 var w = 10240 for (; l < data.byteLength / w; ++l) { o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w))) } o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))) return o } } } </script>
相关文章:
vue-amap是一套基于Vue 2.0和高德地图的地图组件。
官方文档 https://elemefe.github.io/vue-amap ,具体使用方法能够参考node_modules/vue-amap/README.md 文档中有详细使用方法。
相关文章 https://www.jianshu.com/p/bde9526ad756
moment.js 日期处理类库。中文网站: http://momentjs.cn/
cnpm install moment --save
<template> <div> {{ new Date() | dateFrm}} </div> </template> <script> import moment from 'moment' export default { name: 'HelloWorld', filters: { dateFrm: function (value) { return moment(value).format('YYYY-MM-DD HH:mm:ss') } } } </script>
注意:moment.js中的日期格式化与其它语言如(Java)中的格式不太同样。
格式代码 | 说明 | 返回值例子 |
M | 数字表示的月份,没有前导零 | 1到12 |
MM | 数字表示的月份,有前导零 | 01到12 |
MMM | 三个字母缩写表示的月份 | Jan到Dec |
MMMM | 月份,完整的文本格式 | January到December |
Q | 季度 | 1到4 |
D | 月份中的第几天,没有前导零 | 1到31 |
DD | 月份中的第几天,有前导零 | 01到31 |
d | 星期中的第几天,数字表示 | 0到6,0表示周日,6表示周六 |
ddd | 三个字母表示星期中的第几天 | Sun到Sat |
dddd | 星期几,完整的星期文本 | 从Sunday到Saturday |
w | 年份中的第几周 | 如42:表示第42周 |
YYYY | 四位数字完整表示的年份 | 如:2014 或 2000 |
YY | 两位数字表示的年份 | 如:14 或 98 |
A | 大写的AM PM | AM PM |
a | 小写的am pm | am pm |
HH | 小时,24小时制,有前导零 | 00到23 |
H | 小时,24小时制,无前导零 | 0到23 |
hh | 小时,12小时制,有前导零 | 00到12 |
h | 小时,12小时制,无前导零 | 0到12 |
m | 没有前导零的分钟数 | 0到59 |
mm | 有前导零的分钟数 | 00到59 |
s | 没有前导零的秒数 | 1到59 |
ss | 有前导零的描述 | 01到59 |
X | Unix时间戳 | 1411572969 |
GitHub地址:https://github.com/node-modules/utility
utility是一套实用工具类,使用很是简单直接看GitHub地址或者npm安装以后看该插件下的README.md文件,主要包括如下工具方法:
一个小工具类。
http://nodejs.org/api/util.html
安装
cnpm install util
使用
import util from 'util' util.format('%s:%s', 'foo', 'bar')
对于项目中经常使用的工具方法最好本身整理出来,统一使用本身写的工具类,要否则工具类有不少会引入不少,并且每一个开发者都不必定都知道每一个第三方工具类都包含什么方法,若是不知道极可能本身会再写一份实现,容易重复造轮子,若是本身将经常使用的工具方法都收集好统一使用本身的工具类,编码风格比较统一,没有就往本身工具类中添加,有就使用。
实用工具方法:
// 生产环境下禁止输出日志 debugLog (str) { if (process.env.NODE_ENV !== 'production') { console.log(str) } }
分享一个朋友的人工智能教程。比较通俗易懂,风趣幽默,感兴趣的朋友能够去看看。