Vue.js

关于vue+element-ui项目的分页，返回默认显示第一页的问题解决 参考文章： （1）关于vue+element-ui项目的分页，返回默认显示第一页的问题解决 （2）https://www.cnblogs.com/bbqq1314/p/10653481.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4428122/blog/4952388

有兴趣的朋友， 公众号发送【 虾皮 内推 】或者 扫描文章 末尾 二维码 添加微信， 联系KK大佬即可。 我也可以为你提供必要的帮助， 包括： 公司介绍 简历修改 必要的面试辅导等 有需要的朋友可以联系微信， Shopee 期待你的加入。 前端工程师 是Shopee团队的 重要组成部分 ，我们与后端工程师、设计师们紧密合作，实现高质量的Web应用。 我们使用各种现代化的前端工具，例如React，Vue.js等，并沉淀了大量的最佳实践经验。 我们中的部分人专注于架构设计，部分人专注于效率和工程化体系，但是我们中的所有人都是专业的JavaScript开发者。 初级前端开发工程师 外企氛围，蓝海市场，大牛多多，15天年假 15k-30k / 深圳 / 经验1-3年 / 本科及以上 工作职责: 负责网站前端开发，编写高质量、可维护性的代码，并撰写相关技术文档； 负责线上系统的维护和管理，保障系统稳定运行； 不断优化现有产品，提高系统速度、稳定性和可扩展性，不断提升用户体验； 研究和探索最新的前端技术，并应用到实际业务中； 参与团队基础技术、应用框架体系和工程化体系建设。 Preferred Skills 熟悉JavaScript、HTML、CSS等技术； 至少熟悉一种前端开发框架，并有实际的开发经验； 了解不同浏览器之间的特性差异，能够解决常见的浏览器兼容性问题；

新建一个项目，使用vue-cli 3.0进行构建，使用了vux和vue-router，本地运行时是没有问题的，但是在打包之后，页面就一片空白，打开控制台会看到是各种资源引用出错。 这是因为webpack的配置不对，只需要将webpack的配置修改一下就好。 vue-cli 3.0 内置了webpack，并且将vue的配置文件作为了一个可选的配置（创建时没有），如果需要修改vue和webpack的配置，则需要自己建一个配置文件 vue.config.js 放在项目的根目录下。 然后设置一个baseUrl： module.exports = { baseUrl: './' } 这样在打包的时候，就能加载到静态资源了。 然后这个时候还没完，修改完之后，页面变成了这个样子： 页面上只剩一个在App.vue里面的两个跳转按钮，并且跳转按钮跳转后也是不对的。 这个是因为在router里面的mode配置，默认设置为 history ，只要将这个mode注释掉再打包，就能正常显示了。 当然也可以使用history模式的路由，只是项目需要在服务器环境下运行。 比如使用node的serve，这个在vue-cli的文档中有说： https://cli.vuejs.org/zh/guide/deployment.html 我是直接使用了phpstudy的环境运行浏览。 来源： oschina 链接：

在此简单讲述一下个人的理解； 方法： 对于Hbuilder里的项目文件： 1。直接右键：转换成移动app，然后生成一个json文件manifest.json，在该json文件下配置好应用程序的图标、和功能权限设置 2。点击上方的菜单栏“发行”--》发行为原生安装包，载2进行一系列的打包操作，下载即可像用一般程序一样了 对于vue项目app: 在vue项目目录下打开终端并运行项目（yarn serve/npm serve） 然后打开vue脚手架（vue ui）：进入项目管理，配置项目将dist打包路劲： 在这里配置路径为：/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/ 因为在配置原来路径为当前目录时在网页打开的浏览路径为： 谷歌远程移动端调试方式： 改好路径确认修改后到终端输入命令：yarn build 运行，即可生成一个dist包到我们的项目目录下，这时我们可以将该包拖拽到Hbuilder里，并通过步骤一再到步骤3的运行测试，即可生成一个完整app应用了 当然在手机端和电脑端先安装一个电脑控制手机的软件： 3.然后手机和电脑连接（软件上面有教程），再打开Hbuild:运行 手机运行——在手机上会自动安装一个Hbuilder软件并运行测试刚生成的项目 来源：

<template> <div class="page page-scroller"> < scroller class ="scroller" style ="padding-top: 0" :on -refresh="refresh" :on -infinite="infinite" ref ="my_scroller" > <div v- for ="(item, index) in items" class="row" :class="{'grey-bg': index % 2 == 0}" :key="index"> {{ item.name }}{{index}} </div> </scroller> </div> </template> <script> import Vue from 'vue' import VueScroller from 'vue-scroller' Vue.use(VueScroller) export default { name: 'PageScroller' , data () { return { pageSize: 5, // 分页大小 currentPageNo: 0, // 当前页码 items: [], 　　　 isEmpty: true, noData: false } }, mounted () { }, methods:

一 安装 使用npm 安装 npm install vue-scroller -d 二 引入 import VueScroller from "vue-scroller" Vue.use(VueScroller); 三 使用 < tab> < tab-item @ on-item-click= "e=>tabChange(0)" v-bind:selected= "selectTabIndex=='0'?true:false">未验收 </ tab-item> < tab-item @ on-item-click= "e=>tabChange(1)" v-bind:selected= "selectTabIndex=='1'?true:false">已验收 </ tab-item> </ tab> < scroller :on-refresh= "refresh" :on-infinite= "infinite" ref= "my_scroller" > < scroller> 或者下图(中间的是模板) 在methods方法中增加refresh和infinite2个方法。 methods: { /* * * 下拉刷新 */ refresh() { console.log( "refresh" ); this .pageNumber = 1 ; this .getOrderList(

安装vue-scroller npm i vue-scroller -D 在main.js中： import VueScroller from 'vue-scroller ' Vue . use (VueScroller ) 主要是两个方法：: on-refresh= "refresh "下拉刷新回调 : on-infinite= "infinite "上拉加载回调 < scroller : on-refresh= "refresh " : on-infinite= "infinite " > <!-- content goes here 这里写需要下拉刷新，上拉加载的元素，最好是单个元素，多个元素拉动时会出现小bug --> </ scroller > 如： <template> 　　<div id="main"> 　　　　<div class="header">xxxx</div> 　　　　<div class="scrollerBox"> 　　　　　　<scroller class="scroller" :on-infinite="infinite"//上拉加载的回调函数 　　　　　　　　　　　　　　　　　:on-refresh="refresh"//下拉刷新的回调函数 　　　　　　　　　　　　　　　　　:noDataText="'上拉加载更多数据''//上拉加载结束时

一、父子组件的定义 　　负值组件的定义有两种，我称为常规父子组件和特殊父子组件。 　　1.1、常规父子组件 　　将其他组件以import引入用自定义标签接收，在当前组件中component里注册该标签，页面上可以直接用<自定义标签></自定义标签>样子使用。当前组件为父组件，被引入的组件为子组件。 　　引入子组件 　　注册子组件 　　使用子组件 　　1.2、特殊父子组件 　　在路由中定义好组件，组件中含有children，页面上通过<router-view></router-view>形式使用，也算是父子组件，当前组件为父组件，router-view路由的为子组件。 　　 　　在main.vue中引入 　　当前的main.vue为父组件，router-view引入的container.vue为子组件。 二、父组件的数据和方法函数传递到子组件 　　2.1、常规父组件传参到子组件 　　在main.vue父组件上的数据和方法： 　　 　　在main.vue父组件上传递数据和方法： 　　 　　在header.vue子组件上引入父组件传递过劳的数据和方法： 　　 　　在header.vue子组件上使用父组件传递的数据和方法： 　　 　　2.1、特殊父组件传参到子组件 　　在main.vue父组件基本同上，区别在于传递父组件的方法函数时使用“v-on:”或”@“，而不是用“:“ 　　 　

此时忍不住想说一句，我的妈呀 为了解决跨域这个问题 我学习了整一天，只能说自己的本事还不到家，需要学习的还有很多 现在来记录一句 我在向后台请求数据的时候 需要去配置 遇到的一些问题： 1.跨域 直接附上代码 以上是解决跨域做的配置 2.axios 在项目里通常需要做一个请求前的配置 配置上那两个地方 等于向后台调接口的流程就通了 axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/' : '/' 这句话 到现在也没明白为什么要写一个根路径？？？？ 好了 已经就是我遇到的问题，最后找出来的解决方案 仅供参考 2020年5月23日追加 我又来了 现在又遇到了这么一个问题 如果想访问外网地址怎么办 axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '你需要访问的外网地址' : '/' 其他地方和上边的一致，都是在config/index.js 文件中去配置 至于为什么这么做 ？ 还是不明白 来源： oschina 链接： https://my.oschina.net/u/3827679/blog/4287292

<! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < meta name ="viewport" content ="width=device-width, initial-scale=1.0" > < meta http-equiv ="X-UA-Compatible" content ="ie=edge" > < title > Document </ title > < script src ="./lib/vue-2.4.0.js" ></ script > < script src ="./lib/vue-resource-1.3.4.js" ></ script > < link rel ="stylesheet" href ="./lib/bootstrap-3.3.7.css" > </ head > < body > < div id ="app" > < div class ="panel panel-primary" > < div class ="panel-heading" > < h3 class ="panel-title" > 添加品牌 </ h3 > </ div > < div class ="panel-body form-inline" > <