vue,一路走来（16）--本地及手机调试

闲暇时间记录一下如何绑定域名,实现本地及手机调试的过程.我的是微信开发项目,很多功能及操作都是基于微信来开发的,理所当然的就用到微信开发者工具了. 1.首先打开目录C:\Windows\System32\drivers\etc,找到hosts文件,用sublime打开 2.接下来将自己的vue项目 cnpm run dev 就可以了.这样就可以直接用这个域名访问到本地的项目. 3.下载微信小程序0.7.0版本可以看到这个页面,将手机设置一下手动wifi配置完就可以了.…

vue,一路走来（1）--构建vue项目

2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目,这过程中很感谢认识的以及不认识的小伙伴为我解决项目中遇到的问题. 用webpack构建vue项目 1.需要安装node环境.(直接网上找下载就好) 2.在你想要新建项目的路径下新建文件夹,用于存放项目文件,然后shift+右键,选择‘在此处打开命令窗口’,按以下命令操作本人建议将 npm 的注册…

vue,一路走来（13）--vue微信分享

vue微信分享今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 import wx from 'weixin-js-sdk' 3.通过config接口注入权限验证配置,所有需要使用JS-SDK的页面必须先注入配置信息配置信息需要后端返回 share(){ if(this.hdusers!=[]){ this.$http.post(this._getUrl…

vue,一路走来（5）--微信登录

微信登录今天又是周末了,想着博客还没记录完成.是的,下面记录一下微信登录遇到的问题. 在我的项目中,个人中心是需要完成授权登录才可以访问的,首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由,否则就进入登录页面. 定义完路由后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断.写在路由router.config.js文件里每个钩子方法接收三个参数: * to: Rout…

vue,一路走来（3）--数据交互vue-resource

所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不过,vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios(可自行去了解).但我在项目中用的是vue-resource,下面就来讲一下过程中遇到的问题吧! vue-resource(数据交互) 1.先安装 cnpm install vue-resource --s…

vue,一路走来（2）--路由vue-router

安装 Mint UI cnpm install mint-ui --save 如果你的项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入.此时需要在入口文件 main.js 中: 自己觉得mint-ui的文件介绍不是很详细,简单介绍一下我遇到的问题吧! 1.Swipe 轮播图:记得一定要给个高度  <div class="page-swipe"> <mt-swipe :auto=" :show-indic…

vue,一路走来（17）--vue使用scss，并且全局引入公共scss样式

最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './assets/css.css' src/assets/scss.scss $border-color:#c58f5d; .box{ width:100px; height: 100px; border:1px solid #f40; } 第一步:安装依赖 cnpm install node-sass --sa…

vue,一路走来（14）--短信验证码框的实现（类似支付密码框）

由于项目的扩展,新增了很多功能,今天谈一下短信验证码框的实现. 思路:每个小方框其实就是单独的每一个input标签(叫假input标签),每个长度为1,然后上面再写一个大的input标签(叫真实input标签),提高层级定位在上方,最大长度为6,然后将上方真实input标签的值传给每一个单独的假input标签. <div class="phonenum-show"> <div class="getback-title">收回剩余礼金 <…

vue,一路走来（12）--父与子之间传参

今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionnow)"></component-a> import componentA from './components/componentA' export default{ name:'Index', data(){ return{ positionnow:'' } } } compon…

vue,一路走来（9）--聊天窗口

闲暇时间,介绍一下我做一个聊天窗口的心得.如图: 首先要考虑的是得判断出是自己的信息还是对方发来的信息,给出如图的布局,切换不同的类. <li class="clearfix" v-for="(talk,index) in talks" v-bind:class="{'even':othername!=talk.send_from_id,'odd':othername==talk.send_from_id}"> <span v-…

vue,一路走来（7）--响应路由参数的变化

今天描述的问题估计会有很多人也遇到过. vue-router多个路由地址绑定一个组件造成created不执行也就是文档描述的,如下图我的解决方案: created () { console.log(this.getStatus(this.$route.path)) this.userpath() //我要执行的函数 }, methods: { getStatus (urlStr) { var urlStrArr = urlStr.split('/') ] } }, watch: { '$ro…

vue,一路走来（6）--微信支付

微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付.在微信浏览器里面打开H5网页中执行JS调起支付.接口输入输出数据格式为JSON.注意:WeixinJSBridge内置对象在其他浏览器中无效. 注意:在微信支付后台正确配置授权目录后,如果还是出现当前页面的URL未注册,查看http://www.kejik.com/article/152868.html 同时下载以下文件放…

vue,一路走来（17）--底部tabbar切换

<router-link></router-link>存在router-link-active属性,那么底部tabbar切换就简单多了.不会再出现刷新回到第一个的bug. <div class="tabbar"> <footer class="footer"> <router-link to='/Wechat' tag='li' class="footer__li--1"></ro…

vue,一路走来（15）--简单投票系统

今天记录一下简单的投票系统,主要实现选中至少五张作品,并提交投票. 思路:选中作品,将作品id存入到数组里. 取消投票,则从数组中移除该作品id. 如图效果: <li v-for="(opu,index) in opus"> <router-link :to="{ name: 'voteDetail', params: { id: opu.id }}" :id="opu.id"> <div class="o…

vue,一路走来（11）--HTML5 History模式

HTML5 History模式项目中我用的是history模式. 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({ mode: 'history', routes: [...] }) 当你…

vue,一路走来（10）--生产环境

生产环境下的一些问题使用webpack 打包前端应用后,图片和css.js 资源引用会出问题,这源于开发环境的目录和生产环境的路径[url]不同比如,开发环境的url是:http://localhost:8080/static/img/122.png 而生产环境的url是:http://www.xxx.com/dist/static/img/122.png 二者区别,开发环境是放在域名的根目录,所以不存在引用路径变化的问题.如果生产环境不做处理的话,图片等静态文件会自动在相对路径前添加域名.…

vue,一路走来（8）--mint-ui的组件问题

Mint-ui的复选框列表Checklist和Radio 由于我在main.js里已经引用了全部的组件了,这里就不再按需引入了. 一直想着如何将自己的数据添加到 label 和 value里面,后面发现可以用push的方式,如下图: <mt-checklist title="" align="right" v-model="bankList" :options="bankoptions"> <…

vue,一路走来（4）--vuex

补充调用外部js,详细介绍如何调用函数. 1.首先在main.js里引用文件 2.然后算是和jquery框架一样需要所谓的入口函数吧不过令我烦恼的是,在应用的文件中需要把他包含在另一个函数里,才可以调用到.看了别人的例子好像也是这么用的.暂时就先这样了. vuex 想着底部导航块有些页面并不需要呈现出来,后面看到一个案例,用了vuex的分发dispatch 安装:npm install vuex --save http://blog.csdn.net/sinat_17775997/artic…

IntelliJ IDEA 16 本地LicenseServer激活（破解）

IntelliJ IDEA 16 本地LicenseServer激活(破解) IntelliJ IDEA 是Java开发利器,用社区版不爽,干催就用旗舰版,这个是收费的,需要licence. 网上找到了一个帖子 http://blog.csdn.net/rickyit/article/details/50600723,可以通过服务器激活. 最近IntelliJ IDEA 16激活不了,架构师推荐了本地服务器激活. 压缩包地址: https://yunpan.cn/cB2eZHBKuXuZA 访问…

FPGA学习之路——一路走来

既然选择了远方,便不顾风雨兼程,一路走下去. —韩彬在看bingo的书时,看到这样写到.做什么事情都不容易,学习也是,所以一个词很重要不忘初心.作为一名大二的学生,我很高兴能够将自己学习FPGA的过程记录下来,一是方便自己以后回头看的时候能够有所感触,而是想分享自己初学入门是的一些经验给予初学者,能尽量少走弯路. 我是大一暑假开始学习FPGA的,我是微电子专业,学校大三才开数电,大一的时候受老师推荐进了一个实验室,但是没有好好珍惜机会.最后便不退自出.大二学校FPGA创新实验室纳新,我非常想加…

vue打包后运行在本地/非服务器端环境的访问路径

vue打包前的配置: 项目目录下--> config文件夹---> index.js: build: { assetsPublickPath: './', // 设置成相对路径 '/' 改为 './' productionSourceMap: false, // 开发环境默认为true , 打包生产代码前设置为false } vue打包后运行在本地/非服务器端环境的访问路径 PC端: file:///E:/program files/www/index.html#/index 移动…

嵊州D1T1 总统先生，一路走好！

嵊州D1T1 总统先生,一路走好! 在总统先生的所有财产就是 n 杯黑咖啡,咖啡店可以用 m 个空杯子换一杯黑咖啡. 因为总统的特殊身份,心地善良而心生怜悯的咖啡店店长决定先借给总统一杯黑咖啡,只要他最后能还回来就好. 但是为了不在公众面前暴露总统的身份,店长的行为不能太过于引人注目,所以店长最多也只会先借给总统先生一杯黑咖啡. 现在,总统先生一共能喝多少杯黑咖啡? 尊严!正义!哪怕是一杯咖啡. Input 一行两个整数 n, m. Output 一行一个整数,表示总统最多能喝多少杯黑咖啡.…

vue.js 如何加载本地json文件

在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件 vue.js代码如下: var app = express() //从这后面开始加 var appData = require('../data.json'); var seller = appData.seller; var goods = appData.goods; var r…

手机调试 fiddler

使用Fiddler调试手机程序 | 前端和运维利器 2015-11-27 zhy97031 文章来源阅 688 转 4 转藏到我的图书馆微信分享: 作者:Uncle Chen 原文:http://unclechen.github.io/2015/04/30/使用前端开发利器Fiddler调试手机程序/ Fiddler是一个非常好用的web前端调试工具,它能记录客户端和服务器的http和https所有请求和响应,允许监视.设置断点,修改输入输出数据.与其他的抓包工具,例如wir…

如何实用便捷的在本地真机调试WEB端HTML5网页

先简单介绍两款常用但需要一定条件或限制的工具 1.如果你能FQ chrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后公司好几个机器联不上… 2.如果你有苹果电脑和iphone 苹果电脑上的safari 6.0版本后就可以直接连接iphone手机调试手机版上safari正在浏览的web页面,前提是你得有个苹果电脑和iphone手机,但如果你是Android的话,就没办法了符合前端B格的“小苹果” 自己在公司里也是…

Ubuntu杂记——Ubuntu下以USB方式连接Android手机调试

在Ubuntu下进行Android开发,发现自己的手机就算打开USB连接.USB调试还是连不上,一直都是显示??????.百度了很多,发现都是要改“ /etc/udev/rules.d/50-android.rules”文件,但是问题来了,这是专门针对某一手机才有用,万一你用别人的手机调试呢?Oh,Shit!又要改,滚蛋,真心受不了,而且修改步骤还很麻烦.接着又继续百度,发现有一种说法是adb不是以ROOT启动造成的.以下是测试步骤: 打开终端(Ctrl+Alt+T),用cd命令跳转到Andro…