Vue
sanlingwu
这个作者很懒,什么都没留下…
展开
-
node-sass安装失败
看尽了网上的帖子,就是安装不上。。最后放弃node-sass,改用dart-sass,如下:package.json中代码中如果用到了/deep/语法,替换成::v-deep即可原创 2022-04-27 12:28:39 · 153 阅读 · 0 评论 -
vue设置前端配置文件
项目业务中有时会出现频繁变动的变量,比如首页的宣传语、一些时间时长的控制等,时间充裕且有必要的话,可以做一个配置页面在服务器端进行存储和修改,但是在开发过程中以保证业务功能先完成的情况下,可以先将这些变量抽取出来,放在一个json文件中作为配置文件,测试/运维人员可以通过手动修改文件中的值来模拟不同的情况以便于测试。实现方法如下:1.在static(vue2)或者public(vue3)下新建config.json文件:{ "baseUrl":"http://xxxx.com",原创 2022-04-14 16:26:27 · 3201 阅读 · 0 评论 -
【Vue2 & Vue3】开发环境跨域配置
前端开发时难免会遇到本地localhost和后端服务ip不一致导致的跨域问题,这种情况往往可以通过使用nginx来做一个简单的反向代理,但是vue2和vue3在处理方式上还是略有差异,这里简单记录下。Vue2:1.修改config/index.jsmodule.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // 上线配置 proxy原创 2022-04-14 15:41:57 · 1070 阅读 · 0 评论 -
【Vue2 & Vue3】多环境配置(多域名打包)
近期同时接触了多个vue项目,经常在2和3中来回切换,同一种需求的实现方式往往不太一样,这里记录一下面对多域名打包的需求时,2和3分别是如何操作的。需求描述:同一套代码私有化部署,要部署在多个服务器上,或者是测试服务器与生产服务器不同,即访问服务接口域名不同,通过配置实现多环境的打包。Vue2:整体思路:修改配置文件,通过获取命令行的传参定义不同的全局变量。1.项目中/config/dev.env.js修改:新增:HOST: '"dev"''use strict'const原创 2022-04-14 14:40:13 · 4305 阅读 · 0 评论 -
el-table懒加载树形数据,实现整行点击的展开
做项目遇到一个需求,根据集团层级展现一组数据,每个层级都可以点开看更详细的拆分数据,第一想法是用el-table的树形数据来展示,大概下面这个样子:用过这个组件的应该知道这个只能通过点击每一行前面的小箭头实现伸缩,箭头有点小,而且表格一行的数据很长时,对用户的操作不是很友好,所以想能够点击一行的任意位置都可以进行伸缩。1、官网中的toggleRowExpansion方法如下:<el-table :data="tableData" ref="refTable"原创 2021-08-16 15:53:32 · 2581 阅读 · 4 评论 -
【vue cli2 & 3】 本地代理解决跨域问题
一、vue-cli2在config/index.js中修改proxyTable:module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // proxyTable: {},//原来为空 proxyTable: { //这里自定义 '/api': { //自己命名 target: "https:/原创 2021-08-16 14:26:39 · 381 阅读 · 0 评论 -
vue元素根据不同条件切换多个class
做需求遇到一个样式问题,横向的菜单tab在非管理员模式下有7个,在管理员模式下有8个,每个tab在中英文状态下的长度又有长有短,用弹性布局搞了好久总是不如意,最后决定用%写死每个tab的width,记录踩坑如下:1、最开始给每个元素的style绑定一个变量,切换语言时判断各种条件,更改变量值,不为所动= =失败2、以为是style的问题,换成class绑变量值,同样改动不生效= =失败3、查阅资料发现官方这样推荐:v-bind:class="{ active: isActive, 'text原创 2020-12-23 17:58:44 · 4477 阅读 · 0 评论 -
vue项目中设置全局变量
跟后端对接口,由于有跨域问题前端设置了代理,但是打包放到服务器上之后就会出现404问题,原因是这个代理不会在线上环境生效,只是给开发时使用。于是让后台更改设置,前端需要直接访问后台接口,就需要将后台地址设为全局变量,可以在每个组件中直接访问。查询记录方法如下:1. 单独新建一个全局变量模块文件,模块中定义一些变量初始状态,用export default 暴露出去。 2. 在main....转载 2019-01-08 12:18:25 · 8337 阅读 · 0 评论 -
vue中使用插件格式化json(可伸缩)
原本可以使用<pre>标签+JSON.stringfy()函数解决json格式化显示的问题,但是数据量过大希望可以像jsonviewer一样能够伸缩,所以使用了vue-json-viewer插件,mark如下:1、安装$ npm install vue-json-viewer --save2、使用<json-viewer :value="jsonData"&g...转载 2018-11-16 16:37:31 · 24606 阅读 · 2 评论 -
Vue+ElementUI实现input框模糊查询提醒
先是用了ElementUI中给的el-autocomplete例子:<el-autocomplete class="inline-input" v-model="inputName" :fetch-suggestions="querySearch" placeholder="请输入内容"></el-autocomplete&原创 2018-08-01 18:36:05 · 21280 阅读 · 11 评论 -
【Vue初体验】UI工具+axios与后台相连
帮学姐写系统中的一个功能组件,第一次接触了Vue,感觉很好上手,而且可使用的工具也很多,好记性不如烂笔头,小小记录一下~UI组建库:Element,个人很喜欢了,好看又好用。https://element.faas.ele.me/#/zh-CNaxios:一个基于 promise 的 HTTP 库。https://www.kancloud.cn/yunye/axios/234845GET方式:ax...原创 2018-06-12 11:27:41 · 244 阅读 · 0 评论