搜索到
104
篇与
的结果
-
vue使用xlsx修改样式导出excel 安装依赖npm install --save xlsx npm install --save xlsx-style //如果需要修改样式，则需要安装解决引入xlsx-style报错问题找到：node_modules\xlsx-style\dist\xlsx.full.min.js 并把这个js文件拷贝到static文件夹下再index.html中引入 新建downExcel.js文件import XLSX from "xlsx" // 配置 const wopts = { bookType: "xlsx", bookSST: true, type: "binary", cellStyles: true }; function downloadExl(json, config, type) { var tmpdata = json[0]; json.unshift({}); var keyMap = []; //获取keys for (var k in tmpdata) { keyMap.push(k); json[0][k] = k; } var tmpdata = []; //用来保存转换好的json let border = { bottom: { style: "thin", color: { rgb: "000000" } }, top: { style: "thin", color: { rgb: "000000" } }, left: { style: "thin", color: { rgb: "000000" } }, right: { style: "thin", color: { rgb: "000000" } } }; let style0 = { border: border, alignment: { horizontal: "center", wrapText: true, vertical: "center" }, font: { sz: 18, bold: true, color: { rgb: "000000" }, outline: true }, fill: { bgColor: { indexed: 64 } } }; let style1 = { border: border, alignment: { horizontal: "center", wrapText: true, vertical: "center" }, font: { sz: 12, bold: true, color: { rgb: "000000" }, outline: true }, fill: { bgColor: { indexed: 64 } } }; json .map((v, i) => keyMap.map((k, j) => Object.assign({}, { v: v[k], position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1) }) ) ) .reduce((prev, next) => prev.concat(next)) .forEach((v, i) => { // 在遍历时修改样式 let s = { font: { sz: 10, name: "微软雅黑" }, alignment: { horizontal: "center", wrapText: true, vertical: "center" } }; // 判断是否是标题 if (config._this.title.includes(v.v) && v.position.length == 2 && v.position[1] == "1") { s.fill = { fgColor: { rgb: "008000" } }; s.border = { right: { style: "thin", color: { rgb: "000000" } } }; // 判断是否是需要红色字体的标题字段 if (config._this.redTitle.includes(v.v)) { s.font.color = { rgb: "ff0000" }; } } tmpdata[v.position] = { v: v.v || "", s }; }); var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10 //设置每列对应的宽度 tmpdata["!margins"] = [{ //工作表单元格合并配置项 可选 s: { //s start 开始 c: 0, //cols 开始列 r: 0 //rows 开始行 }, //开始 A1 e: { //e end 结束 c: 4, //cols 结束列 r: 0 //rows 结束行 } }, { s: { c: 0, r: 1 }, //开始 A2 e: { c: 1, r: 1 } //结束B2 }, { s: { c: 2, r: 1 }, //开始 C2 e: { c: 3, r: 1 } //结束D2 }, ] // !cols工作表列宽配置项 可选 tmpdata["!cols"] = config.colwidth; // 第一二行样式 tmpdata["A1"].s = style0; tmpdata["A2"].s = style1; tmpdata["C2"].s = style0; var tmpWB = { SheetNames: ["mySheet"], //工作表名数组 Sheets: { mySheet: Object.assign({}, tmpdata, //!ref设置工作表的范围 如 必须 否则不显示 { "!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1] //设置填充区域 } ) } }; const tmpDown = new Blob( [ s2ab( XLSX.write( tmpWB, { bookType: type == undefined ? "xlsx" : type, bookSST: false, type: "binary" } //这里的数据是用来定义导出的格式类型 ) ) ], { type: "" } ); // 数据处理完后传入下载 saveAs( tmpDown, config._this.fileName + "." + (wopts.bookType == "biff2" ? "xls" : wopts.bookType) ); } // 获取26个英文字母用来表示excel的列 function getCharCol(n) { let temCol = "", s = "", m = 0; while (n > 0) { m = (n % 26) + 1; s = String.fromCharCode(m + 64) + s; n = (n - m) / 26; } return s; } function s2ab(s) { if (typeof ArrayBuffer !== "undefined") { 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; } else { var buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff; return buf; } } // 下载功能 function saveAs(obj, fileName) { var tmpa = document.createElement("a"); tmpa.download = fileName || "未命名"; // 兼容ie 火狐 下载文件 if ("msSaveOrOpenBlob" in navigator) { window.navigator.msSaveOrOpenBlob(obj, fileName); } else if (window.navigator.userAgent.includes("Firefox")) { var a = document.createElement("a"); a.href = URL.createObjectURL(obj); a.download = fileName; document.body.appendChild(a); a.click(); } else { tmpa.href = URL.createObjectURL(obj); } tmpa.click(); setTimeout(function () { URL.revokeObjectURL(obj); }, 100); } export default downloadExl;使用import downloadfn from "@/config/downExcel data(){ return{ fileName:"testExcel", xmindJSON: [ { Code: 1, Name: "里斯", GBPerfix: "ABC-F", stop: "测试" }, { Code: 2, Name: "里斯1", GBPerfix: "ABC-B", stop: "测试1" }, { Code: 3, Name: "里斯2", GBPerfix: "ABC-D", stop: "测试1" } ], config: { colwidth: [ { wpx: 169 }, { wpx: 63 }, { wpx: 203 }, { wpx: 128 }, ], _this: this }, title: ["功能模块与路径", "用例编号", "前置条件"] } }methods:{ export() { downloadfn(this.xmindJSON, this.config); } } -
请输入一个有效的值，最接近的值为24.01和25.01 在用到表单里，发现把鼠标移到type="number"的input框上时有时候会显示“请输入有效值,两个最接近的有效值为24.01,25.01”的提示，24.01和25.01跟你输入的整数值有关。代码里面并没有这个提示，发现只有当输入小数时会出现提示，原来是浏览器默认输入整数，如果要输入小数需要修改步长，比如将step设为0.01。 <el-input @input="((val)=>{editInput(val,'beforeWeight')})" type="number" @blur="onBlurBeforeWeight" v-model="form.beforeWeight" :min="0.01" :max="9999999999.99" :step="0.01" placeholder="请输入去种仁前重量" > <template slot="append">公斤</template> </el-input>
-
elementui textarea与input字体不一致问题解决 今天使用elementui中input及textarea时，发现两种控件默认显示的字体是不一致的，input的比较扁，而textarea显示的比较瘦高。可以看下下面这张图，比较明显。原因通过F12，我们可以看到textarea的字体为monospace,如下图input的字体为Arial,如下图解决在全局css文件加入以下代码即可， 因为我们项目使用的是ruoyi的系统，所以在sec/assets/styles/element-ui.scss文件中加入以下代码即可textarea { //font-family: Arial, Helvetica, sans-serif; //解决TextArea与input不一致的问题 font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; }
-
vue-baidu-map通过路书实现轨迹回放 网上实现轨迹回放的代码很多，但是很少有vue实现的。本文通过vue-baidu-map对vue轨迹回放功能进行说明。安装依赖npm install vue-baidu-map --save修改main.jsmain.js增加以下内容，注意ak需要替换成自己的。import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: '替换成自己的ak' })前端页面<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" :inline="true"> <el-row> <el-col :span="6"> <el-form-item label="车辆" prop="vehicleLicence"> <el-select filterable v-model="queryParams.vehicleLicence" placeholder="请选择车辆" clearable size="small" style="width: 100%" > <el-option v-for="vehicle in vehicleOptions" :key="vehicle.licence" :label="vehicle.licence" :value="vehicle.licence" /> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="查询时间" prop="dateRange"> <el-date-picker v-model="dateRange" size="small" style="width: 100%" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="请选择开始时间" end-placeholder="请选择结束时间" :picker-options="pickerOptions" ></el-date-picker> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="轨迹速度"> <el-slider v-model="speed" style="width: 200px" :step="1"></el-slider> </el-form-item> </el-col> <el-col :span="5"> <el-form-item style="float: right"> <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-col> </el-row> </el-form> <baidu-map style="height:47.1rem;width:100%" :center="center" :zoom="15" :scroll-wheel-zoom="true"> <bm-polyline :path="path" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="3" :editing="false" ></bm-polyline> <bm-marker :position="{lng: startMark.lng, lat: startMark.lat}"></bm-marker> <bm-marker :position="{lng: endMark.lng, lat: endMark.lat}"></bm-marker> <bml-lushu @stop="reset" :path="path" :icon="icon" :play="play" :rotation="true" :speed="speed * 10" :infoWindow="true" :content="content" > </bml-lushu> </baidu-map> </div> </template> <script> //百度地图 import BaiduMap from 'vue-baidu-map/components/map/Map.vue' import BmScale from 'vue-baidu-map/components/controls/Scale' import BmNavigation from 'vue-baidu-map/components/controls/Navigation' import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer' import BmMarker from 'vue-baidu-map/components/overlays/Marker' import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow' import { BmlLushu } from 'vue-baidu-map' import drugMarkerIcon from '@/assets/icons/map_marker_check.png' import { selectGpsOrbitList } from '@/api/dmp/industry/gps/orbit' import { listAllVehicle } from '@/api/basic/vehicle' export default { components: { BaiduMap, BmScale, BmNavigation, BmMarkerClusterer, BmMarker, BmInfoWindow, BmlLushu }, props: {}, data() { return { // 查询参数 queryParams: { vehicleLicence: undefined }, // 日期范围 dateRange: [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00', new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 23:59:59'], play: false, path: [], center: { lng: 116.984646, lat: 36.659686 }, startMark: {}, endMark: {}, icon: { url: drugMarkerIcon, size: { width: 32, height: 32 }, opts: { anchor: { width: 27, height: 13 } } }, content: undefined, speed: 20, pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() - 8.64e6 } }, vehicleOptions: [] } }, methods: { reset() { this.play = false }, handleSearchComplete(res) { this.path = res.getPlan(0).getRoute(0).getPath() }, handleQuery() { const search = this.addDateRange(this.queryParams, this.dateRange) if (this.queryParams.vehicleLicence === undefined) { this.msgError('请选择车辆') return } if (search.beginTime === undefined || search.beginTime === '' || search.endTime === undefined || search.endTime === '') { this.msgError('请选择查询时间') return } selectGpsOrbitList(this.addDateRange(this.queryParams, this.dateRange)).then(response => { if (response.data.length <= 0) { this.msgError('未查询到该车辆的运行数据') return } let length = response.data.length let middle = -1 if (length % 2 === 0) { middle = length / 2 + 1 } else { middle = (length + 1) / 2 } response.data.forEach(item => { let obj = { lng: item.longitude, lat: item.latitude } this.path.push(obj) }) this.center = this.path[middle] this.startMark = this.path[0] this.endMark = this.path[this.path.length - 1] this.content = this.queryParams.vehicleLicence this.play = true }).catch(error => { }) }, /** 重置按钮操作 */ resetQuery() { this.resetForm('queryForm') this.dateRange = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00', new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 23:59:59'] } }, mounted() { listAllVehicle().then(response => { this.vehicleOptions = response.data }) } } </script> <style> </style> data关键参数说明：play:true或false，为true时，开始播放轨迹。path:数组，格式为[{lng: 116.984646,lat: 36.659686}]center:地图中心点，格式{lng: 116.984646,lat: 36.659686}startMark:轨迹开始经纬度，格式{lng: 116.984646,lat: 36.659686}endMark:轨迹终点经纬度，格式{lng: 116.984646,lat: 36.659686}icon:轨迹图标，如下演示的小车图标content:轨迹显示内容，如下按时的车牌speed:轨迹绘制的速度，这里通过el-slider实现滑动调整速度bm-polyline组件属性说明path:绘制曲线的经纬度数组bml-lushuplay:true或false，为true时，开始播放轨迹。infoWindow:true或false，为true时，显示窗口，及content内容。
-
Vue使用NProgress NProgressNProgress就是在页面顶端显示一个进度条。安装npm install --save nprogress使用引入NProgress我们新建一个global.js文件，通过钩子，在路由开始前，启动NProgress，路由结束后，停止NProgressimport NProgress from 'nprogress' import 'nprogress/nprogress.css' import router from './router' router.beforeEach((to, from, next) => { NProgress.start() setTimeout(() => { next() }, 1000) } ) router.afterEach((to, from) => { NProgress.done() })在main.js中引入global.jsimport './global'NProgress方法说明//方法 NProgress.start() - 显示进度条 NProgress.set(0.4) - 设置百分比 NProgress.inc() - 稍微增加 NProgress.done() - 完成进度(进度条消失)修改NProgress颜色颜色配置是在App.vue中的加入样式#nprogress .bar { background: red !important; }NProgress配置可以通过调用 .set(n)来设置进度，n是0-1的数字。 NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done() 可以使用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。 NProgress.inc(); NProgress.configure({ showSpinner: false }) //禁用进度环 NProgress.configure({ trickle : false }) //关闭进度条步进 NProgress.configure({ trickleRate : 10}) //每次步进增长多少 NProgress.configure({ trickleSpeed : 200}) //每次步进间隔，单位毫秒ms NProgress.configure({ easing: 'linear'}) //动画方向 NProgress.configure({ speed : 10}) //动画速度，单位毫秒ms NProgress.configure({ minimum : 0.08}) //最小百分比spinner即右侧的一个东西
-
修改elementUI中el-table树形结构图标 elementUI中的表格，可以显示成树形的结构，默认的样式，跟el-tree的样式一样，el-table如果是树形结构的话，如果树形有下级的话，显示的是一个小三角号，如果没有下级的话，是没有图标的。感觉这种图标不是特别好看，为了美化，我们可以替换成自己的图标。如果我们想改变树形的图标，可以在vue的style中加入以下样式<style scoped> .el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } /*有子节点 且未展开*/ .el-table /deep/ .el-table__expand-icon .el-icon-arrow-right:before { background: url('../../../../assets/images/文件夹未展开.png') no-repeat; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } /*有子节点 且已展开*/ .el-table /deep/ .el-table__expand-icon--expanded{ -webkit-transform: rotate(0); transform: rotate(0); } .el-table /deep/ .el-table__expand-icon--expanded .el-icon-arrow-right:before { background: url('../../../../assets/images/文件夹展开.png') no-repeat; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } /*没有子节点*/ .el-table /deep/ .el-table__placeholder::before { background: url('../../../../assets/images/文件.png') no-repeat; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } </style>
-
vue前端生成二维码插件 安装插件 npm i qrcode -s引入插件import Vue from 'vue' import App from './App.vue' import QRCode from 'qrcode' Vue.use(QRCode) Vue.prototype.$QRCode = QRCode new Vue({ el: '#app', a:'123', render: h => h(App) }) 使用<template> <div id="app"> <canvas id="canvas"></canvas> </div> </template> <script> import popup from "./components/popup.vue"; export default { components: { popup }, name: "app", data() { return {}; }, mounted: function () { var cavas = document.getElementById("canvas") this.$QRCode.toCanvas(canvas,'https://www.xiangcaowuyu.net') }, computed: { }, methods: { }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
-
vue状态管理与vuex 安装vuexnpm i vuex -s创建数据仓库创建store文件夹，并在文件夹下创建index.js文件import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { increment: state => state.count++, decrement: state => state.count-- } })引入数据仓库在main.js中引入我们定义的数据仓库。import Vue from 'vue' import App from './App.vue' import store from '@/store' new Vue({ el: '#app', store, render: h => h(App) })使用<template> <div id="app"> {{ count }} <button @click="increment">++</button> <button @click="decrement">--</button> </div> </template> <script> import popup from "./components/popup.vue"; export default { components: { popup }, name: "app", data() { return {}; }, mounted: function () {}, computed: { count() { return this.$store.state.count; }, }, methods: { increment: function () { this.$store.commit('increment') }, decrement: function () { this.$store.commit('decrement') }, }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>每次点++按钮，count自动+1
-
vue基础之slot内容分发（插槽） 什么是slotslot的官方定义是用于组件内容分发，简单通俗的解释就是在组件化开发中，虽然组件都是一样的，但是在不同的使用场景，组件的某一部分需要有不同的内容显示（slot还有一个形象的名字“插槽”），slot就好比在组件开发过程中定义的一个参数（通过name值来区分），如果不传入值就当默认值使用，如果传入了新值，在组件调用时就会替换定义时的slot默认值。[card-default width="100%" label="slot分为以下两类"]匿名slot具名slot[/card-default]匿名slot匿名slot顾名思义就是没有名字的插槽，特点是可以放任何内容。首先设想一个弹出提示框的场景，提示框都包含头部、中间内容和底部内容三部分。一般情况下头部、底部是固定不变的，只有中间内容可以任意放置。下面我们我们基于以上场景说一下匿名插槽的使用。新建组件我们创建一个名称为popup.vue的组件。<template> <div> <div>这是标题</div> <slot>这部分内容会被替换</slot> <div>这是底部内容</div> </div> </template> <script> export default {}; </script>引用组件我们在app.vue中引入刚才定义的组件。不替换插槽内容我们先只引入组件，不替换slot的内容<template> <div id="app"> <popup> </popup> </div> </template> <script> import popup from './components/popup.vue'; export default { components: { popup }, name: "app", data() { return { msg: "Welcome to Your Vue.js App1", }; }, mounted: function () {}, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>可以看到，slot显示的是默认的内容。替换插槽内容这一次，我们替换slot的内容，修改app.vue如下<template> <div id="app"> <popup> 这部分内容会被替换 </popup> </div> </template> <script> import popup from './components/popup.vue'; export default { components: { popup }, name: "app", data() { return { msg: "Welcome to Your Vue.js App1", }; }, mounted: function () {}, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>再次运行，查看内容可以看到，slot内容被替换成了我们app.vue中的内容。[alt type="success"]一个组件中，如果有多个匿名的slot，那么所有的slot都会被替换[/alt]具名slot正如上面提到的，一个组件中，如果有多个匿名的slot，那么所有的slot都会被替换，还是上面的场景，如果我们的标题、中间部分及底部都是可替换的，显然匿名slot就无法解决我们的问题。针对这个场景，我们就可以使用具名slot。具名slot就是有名字的插槽，一旦有了名字，我们就可以针对特定的插槽进行替换。修改popup.vue组件这次，我们把标题、中间部分及底部都做成插槽。<template> <div> <slot name="title">这是标题</slot> <slot name="content">这部分内容会被替换</slot> <slot name="footer">这是底部内容</slot> </div> </template> <script> export default {}; </script>修改app.vue<template> <div id="app"> <popup> <div slot="title">这是替换后的标题</div> <div slot="content">这是替换后的内容</div> <!-- 不替换底部，显示的是默认值 --> </popup> </div> </template> <script> import popup from './components/popup.vue'; export default { components: { popup }, name: "app", data() { return { msg: "Welcome to Your Vue.js App1", }; }, mounted: function () {}, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 可以看到，替换的内容正确显示，没替换的内容显示了默认值。
-
console.log()输出多彩信息 平时我们在前端打印日志，可能直接就是使用console.log()，其实console.log()有很多有趣（也可能无用）的用法。下面我们介绍一下通过console.log()输出多彩日志。console.log()可以通过'%c'输出标准的css样式。console.log("%cMy stylish message", "color: red; font-style: italic"); console.log( "%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em" ); console.log( "%cRainbow Text ", "background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;" ); console.log("%c香草物语", "color:#fff; background: linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3); padding: 8px 15px; border-radius: 0 15px 0 15px");
-
Vue.use()的用法 介绍在vue的main.js中，我们经常使用Vue.use(xx)方法。比如我们引入elementUI，在main.js中，我们一般通过如下代码引入：import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)[alt type="error"]需要先通过npm i element-ui -S安装elementUI[/alt]原来在开发时，一直都是这么用，但是基本没留意过为什么这么弄。官方解释安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。什么意思呢？Vue.use() 中的参数必须是一个function函数或者是一个Object对象，如果是对象的话，必须在对象中提供一个install方法。之后会将 Vue 作为参数传入。我们分两点来看：如果Vue.use() 中的参数是一个function函数，那么函数的参数是Vue对象。如果Vue.use() 中的参数是一个Object对象，那么这个对象必须提供一个install方法，install方法的参数就是Vue。Demo演示我们通过以下两个Demo来分别演示一下上面说的两种情况。Object对象我们通过自定义一个主键的形式进行演示说明。创建项目vue init webpack-simple custom-global-component一路回车，然后执行npm run dev如果项目能正常启动代表创建成功。创建组件创建components文件夹，并创建loading.vue及index.js文件。目录结构如下loading.vue只是一个简单的组件，代码如下<template> <div> Laoding... </div> </template> <script> export default { } </script>在index.js，我们引入并注册定义的组件。import LoadingComponent from './loading.vue' const Loading = { install:function(Vue){ Vue.component('Loading',LoadingComponent) } } export default Loading在main.js中通过Vue.use()调用。import Loading from './components/loading' Vue.use(Loading)使用在App.vue中使用我们的组件。<template> <div id="app"> <Loading/> </div> </template>function函数创建函数function demo(Vue){ console.log(Vue) } export default demo引入在main.js中引入函数。import demo from './utils/func' Vue.use(demo)
-
vue使用axios配置跨域 开发环境中，我们一般通过两种方式解决跨域：让后端设置CORS，允许我们请求。前端在webpack中设置proxyTable{}代理。后端地址我们这里简单模拟一下后台就可以了，请求路径为http://localhost:8080/normal前端配置安装axios通过npm安装axiosnpm install axios --save配置main.jsimport axios from 'axios' Vue.prototype.$axios = axios axios.defaults.baseURL = '/api'修改代理打开vue项目config文件夹下的index.js在里面把proxyTable: {}设置如下proxyTable: { '/api': { target:'http://localhost:8080', // 请求后台的地址 changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite:{ // 路径重写， '^/api': '' // 替换target中的请求地址，相当于前台请求/api/xx会替换成http://localhost:8080/xx。 } } },测试 this.$axios.get('/normal').then(res=>{ console.log(res) })
