【Vue】
vue知识积累与学习
SteamPY
这个作者很懒,什么都没留下…
展开
-
九, VueのRem布局结合postcss-pxtorem和amfe-flexible实现Steampy市场移动端适配
基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem1. 安装 amfe-flexible依赖npm install amfe-flexible --saveTIP: flexible会为页面根据屏幕自动添加<meta name='viewport' >标签,动态控制initial-scale,maximum-scale,...原创 2020-04-11 14:08:45 · 601 阅读 · 0 评论 -
八, VueのSteampy市场项目笔记
在做Steampy市场(https://steampy.com)项目,作为新手小白,笔记方便查询1.移动端页面设置width:100%, 撑满屏幕宽高 超出屏幕边界问题解决width: calc(100%);height: auto;overflow: hidden;注意:采用overflow:hidden, 超出部分自定隐藏处理...原创 2020-04-06 13:42:20 · 1194 阅读 · 0 评论 -
七, Vueの开发Steampy市场项目总结
在做Steampy市场项目,作为新手小白,知识总结,笔记方便查询:css相关,如何设置行内元素宽度满屏,左右间距固定长度,<div style="width:100%;padding-left:20px;padding-right:20px;"> <Input v-model="inputContent.player" placeholder="请输入账号."...原创 2020-03-29 13:20:35 · 3108 阅读 · 0 评论 -
六, Vueのvue.config.js的代理devServer.proxy配置,解决开发环境跨域问题
背景在做steampy市场(https://steampy.com), 在实现前端应用和后端 API 服务器没有运行在同一个主机上,需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。 问题Access to XMLHttpRequest at 'http://steampy....原创 2020-03-25 16:19:15 · 7960 阅读 · 0 评论 -
五, Vueのvue-cli2和vue-cli3生产环境去掉console.log
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。如果手动删除未免也太累了,再说以后想再开发还得重新写console。webpack提供了删除console的插件,这里分两种:vue-cli2 生成环境去除console.log1. 项目build 下面webpack.prod.config.js 文件中:plugins: [ ...原创 2020-03-16 12:56:06 · 2896 阅读 · 0 评论 -
四, Vue のthis.$route.params和this.$route.query的传参方式
vue中页面间传递参数方式多种,这里简单介绍常见两张: this.$route.query 在A页面中, 页面跳转处this.$router.push({ path: '/register', query:{ id:"123456", }})B页面接受参数this.id= this.$...原创 2020-03-14 13:14:41 · 559 阅读 · 0 评论 -
三, Vue のvue-cli 2.x和3.x 在nginx部署多个vue项目
项目中使用了nginx,但是需要分项目在同一个服务器测试,建立多个项目配置,这里分vue-cli 2.x和3.x vue-cli 2.x 工程中有 3 个地方要设置(假设配置在gentle-vue,这个目录下) config目录 --> index.js --> build 中 设置访问路径:注意:更改assetsPublicPath: '/gentle-vu...原创 2020-03-05 16:58:43 · 523 阅读 · 0 评论 -
二. Vue axios使用Blob下载二进制流文件
项目中需要实现二进制流文件下载,采用Blob方式 首先采用axios进行get请求. 代码如下: import axios from 'axios' const instant = axios.create({ withCredentials: true, ...原创 2020-03-05 13:49:45 · 5775 阅读 · 0 评论 -
一. Vue项目引入字体(思源黑体)
通过Google Fonts资源引入字体方式在项目index.html , 通过Link标签在网页头部引用<head> <meta charset="utf-8"> <!--引入思源黑字体--> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=No...原创 2020-03-03 16:05:05 · 13267 阅读 · 0 评论