最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说“我也不知道我的接口文档写的对不对,我们验证一下吧?我也不知道我的数据处理逻辑对不对,我们验证一下吧?”, 哈哈哈,自嘲一下~ 当一切准备就绪,此时就剩下了完成项目的最后一公里,即真机测试和打包上线. 那么如何在vue项目里做真机测试呢?王小闰准备在leader面前大展身手,展示下自己最近的学习成果,让我们跟着王小闰的节奏操练起来~ 首先需要在命令行中输入 npm…

何为项目接口联调? 前端代码编译好了  后端接口写好了 我们就需要去掉前端模拟数据干掉 用后端提供的数据.进行前后端的一个调试 如何联调? config目录下面 index.js 文件 dev 中proxyTable 中的‘api ’ 中的taget 目标换成后端地址(注意端口) http://localhost:80http://localhost:80 pathRewrite会把 api开头的映射到 后端服务器地址上的api //总结 只要在开发服务器下请求api/后面的地址 都帮我们转发到…

最近我的朋友王小闰进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是王小闰非常熟悉的vue全家桶,后端用的是Java语言. 在前后端开发人员碰面之后,协商确定好了前端需要的数据接口(扯那么多,其实也就是关于json数据的字段的定义),然后前后端程序猿就嗨皮地并线开发去了. 前后端联调前夕 我的朋友王小闰他们这家公司做本地旅游项目的,安排到他手上的活儿是该旅游项目的webapp工程. 项目动工伊始,一切都得从头来做.在公司没日没夜的开发了一天之后,王小闰在没有借助vue-cli官方提供…

最近我的朋友王小闰参加了一场面试,在他填写简历表的时候,排在他前面的应聘者正在旁边邻桌接受来自面试官的检验. 王小闰边写边想,这不就是一会儿要面试自己的前端leader么,现在面试官提问的一些面试题会不会就是待会儿要问自己的问题? 想到这,我朋友王小闰不自觉地竖起了耳朵听,借鉴下别人回答问题的经验,保不齐自己一会儿要套用一下. 不听不知道,一听吓一跳.没准备好的面试,那叫一个尬聊. 首先,面试开场白总缺少不了自我介绍,一方面是面试官想听听你对自己的介绍,顺便有时间看看简历上的描述,是否与口述一致…

昨天用真机测试项目出现这样的错误,在网上搜集了一些信息,所以将自己的经验分享出来帮助更多的人. 第一步: 检查你的1和2是否填写正确,如果你是运行别人的项目,BundleIdentifier要和你的Xcode之前填写的要一致,例如,我之前填写的com.baidu.xxxx,但是我真机测试的是com.alibaba.xxx,这样就不一致了,可能会导致错误 第二步: 在Bulid Setting 中找到Singning, 在3处,你可能会看到自己的开发者账号,不要选!!,还有下面 4 Develop…

Xamarin Android项目真机测试闪退 项目在模拟器中运行正常,但在真机上闪退.这是由于项目设置使用共享的Mono运行时.Visual Studio中,在项目属性-Android Options总,不要勾选Use Shared Runtime.Xamarin Studio中,在工程选项-构建-Android Build选项中,不要勾选Use shared Mono runtime.…

在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 打包完后,提示只能在服务端可以开启,file模式下无法工作 问题: 使用vue脚手架开发的spa项目,在打包为app时,出现白屏现象 原因: 想要在手机端打开,等同于在本地file模式下…

react-native以后会更火的 一.安装java 二.安装Android Studio 三.安装react-native需要的Android studio额外部分 四.安装nodeJS  五.安装git 六.安装python 七.安装react-native 一.安装java 其实一般开发人员都已经配置好了java的jdk和jre. 下面是教程: 1.从Java官网下载JDK并安装. 也可以从百度云下载x64版本 2.安装成功可以用java -version查看版本信息 3. 配置环境变量…

开发中使用vue-cli正常开发 将配置文件中的路径改为相对路径--否则在打包之后真机运行时无法找到指定路径 开发完或者开发途中想要查看调用h5+的api效果就需要打包了 npm run build 项目打包后找到dist文件夹 将dist文件夹中的文件拷贝出来 使用hbuilder在非项目文件夹中新建一个app项目 将拷贝的文件复制到新建的app项目中,替换默认文件 找到配置文件manifest.json完成相关配置 配置完成就点击hbuilder的真机运行,这之前需要连接手机,或者启动模拟器…

在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod…

一:修改config 找到config文件夹下的index.js文件并修改为: module.exports = { dev: { host: '0.0.0.0' // 原为: hotst: 'localhost' } } 二.查询本地IP地址 ctrl+r输入cmd回车,打开命令提示符,输入ipconfig,查看本地ip, 将项目url中的localhost改为本地ip 三.打开火狐浏览器 点击二维码,直接用手机扫二维码即可看到效果: 若有不明白请加群号:扫一扫加入QQ群以及微信群.QQ群号:…

1.在项目中重启命令行运行ipconfig(如果是ios系统运行ifconfig)获取到项目在本机运行的ip地址 2.在项目的package.json中修改允许访问ip地址(--host 0.0.0.0) "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", 3.在手机端打开该ip地址就可以在手机上运行了 http://19…

一.查看ip地址 在控制台输入 ifconfig 查看ip地址 二.修改webpack-dev-server配置项 webpack-dev-server 默认不支持ip地址访问,需要修改配置项 三.测试 当pc和手机处于一个局域网时,手机访问ip地址,就能进行真机测试了.…

很多时候我们对移动端进行测试的时候,有pc端的测试,也有真机上的测试,pc的测试就不多说了,因为其实基本上大家都懂的.真机测试上也有几种方法,这里就推荐三种: 移动端真机调试方法 chrome真机调试 weinre调试 spy-debugger调试 当然我这里就不详细去讲这几种的真机调试到方法了,详细可以看 9102 了,你还不会移动端真机调试? 但是我这里就讲一下另一种不一样的真机测试--node打开移动项目 step1 首先先准备好基本的项目,因为个人用angular比较多,这里就拿angu…

准备 今天将cocos2d-x的示例项目tests编译到android真机运行,以及如何创建cocos2d-x的android项目. 打开cocos2d-x的tests项目,路径为:D:\cocos2d-x-2.0.1\tests 下载:PdaNet:http://xiazai.zol.com.cn/detail/36/350633.shtml 如果你的手机或者平板无法连上电脑,可以下载这个软件. 第一步:编译cocos2d-x的示例项目 首先用visual studio 打开 tests项目,…

使用模拟器运行项目: 命令行中React native项目目录下键入react-native run-ios会启动iOS模拟器, 默认是使用iPhone6,如果想要试用其他版本的模拟器则需要在react-native run-ios后携带参数–simulator simulator后指定模拟器的名字,注意需要添加双引号. 例如启动iPhone7 react-native run-ios --simulator "iPhone 7 Plus" 使用真机运行项目: 使用真机运行之前需要安装…

今天将cocos2d-x的示例项目tests编译到android真机运行,以及如何创建cocos2d-x的android项目. 打开cocos2d-x的tests项目,路径为:D:\cocos2d-x-2.0.1\tests 下载:PdaNet:http://xiazai.zol.com.cn/detail/36/350633.shtml 如果你的手机或者平板无法连上电脑,可以下载这个软件. 第一步:编译cocos2d-x的示例项目 首先用visual studio 打开 tests项目,看看项…

概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面中,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也不便于管理. 其次,定义在HTML页面中的组件,无法被其他页面重用,我们只能通过复制粘贴的方式将组件代码拷贝到其他页面,这也违反了DRY原则.既然组件是Vue.js的重要概念,我们就应该利用好它. 为了解决这些问题,Vue.j…

继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜值,打算走心派.结合了后台nodejs,以及数据库MongoDB来开发了一个实时聊天系统.这个系统可以说是一统江山,也算是实现前端程序员的一个梦了,前后通吃.自认为是一个比全的项目.项目地址:https://github.com/hua1995116/webchat 觉得好的请顺手来个star. 技…

对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目. 1.安装node环境 可以…

Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发.   一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. 1. Vue.js基础知识 Vue.js特点就是入门简单,api 简洁一致,文档清晰.对于了解Html,CSS,JavaScript花几个小时看一遍,就能掌握基础的东西. 可参考http://www.runoob.com/vue2/vue-tutorial.html. 2. ES6的模块化加载 有E…

原项目地址:[ vue+websocket+express+mongodb实战项目(实时聊天)(一)][http://blog.csdn.net/blueblueskyhua/article/details/70807847](http://blog.csdn.net/blueblueskyhua/article/details/70807847) github地址: https://github.com/hua1995116/webchat 在线演示地址:http://www.qiufengh…

build/*.js config/*.js src/旧代码文件夹 部门最近的一个新项目启动,很幸运由我来主导整个前端部分的技术选型和整体架构,项目工作量很大,但是却没有足够的人手,只有三个连CSS都不太会的实习生跟着我一起做,压力山大.两个月以来,虽然遇见了很多问题,但是最终顺利的解决了,项目基本完成,果断写一篇总结,毕竟是第一个真正意义上全权自己负责的大项目 . 一.技术选型. 如果没有接触过新的知识,我可能会像之前的部门的所有项目一样,按部就班的使用Jquery + bootstrap +…

一.script引入(联系使用,小型项目) 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 二.Vue 提供一个官方命令行工具 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. 1.cli是建立在node的环境下,…

.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. Manually select features自己去选择需要的功能,提供更多的特性选择.比如如果想要支持 TypeScript ,就应该选择这一项. 可以使用上下方向键来切换选项.如果只需要 babel 和 eslint 支持,那么选择第一项,就完事了,静静等待 vue 初始化项目. vue-c…

vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 <div id="vue"> <button onclick="vm.ColorRed=vm.ColorRed^1">gg</button> <div v-html="site" v-bind:class="…

安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js 修改port即可!…

Vue Create 创建一个新项目 命令行创建和视图创建 开始之前 你可以先 >>:cd desktop[将安装目录切换到桌面] >>:vue -V :Vue CLI 3.0.0-rc.11 >>:vue create yanxiatingyu :xxxxx一段英文 >>:y >>:cd yanxiatingyu >>:npm run serve 浏览器输入:http://localhost:8080/ 假如浏览器能够打开,没有出现…

前端架构之路:使用Vue.js开始第一个项目   Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用传统mvc项目的开发人员,笔者建议在开始项目前,对以下两个技术点进行了解. 1. Vue.js基础知识 Vue.js特点就是入门简单,api 简洁一致,文档清晰.对于了解Html,CSS,JavaScript花几个小时看一遍,就能掌握基础的东西. 可参考http://www.runoob.com/v…

概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面中,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也不便于管理. 其次,定义在HTML页面中的组件,无法被其他页面重用,我们只能通过复制粘贴的方式将组件代码拷贝到其他页面,这也违反了DRY原则.既然组件是Vue.js的重要概念,我们就应该利用好它. 为了解决这些问题,Vue.j…