背景 还是之前的那个项目，做完国际化没多久，还没来得及划水， 又有新的活了 -- 移动端的兼容。 考虑到后期的复杂度， 需要做两套资源。 具体的目标是：同一个URL，PC打开就显示PC的那一套， M端打开就显示Mobile的页面。 create-react-app 脚手架本身不支持多入口， 需要改造，今天下午研究了一下，改造了一波， 基本达到了预期， 在这里简单把经验总结分享下。 先睹为快 Mobile:PC:输出之后的文件， 相比之前的index.html， 多了...
view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <button type="primary"bindtap="modalcnt">模态弹窗</button> <button type="primary"bindtap="actioncnt">操作菜单</button></view>1.消息提示——wx.showToast(OBJECT)//show.js //获取应用实例 var app = getApp() Page({showok:function() {wx.showToast({title: 成功,icon: success,duration: 2000})} }) ...
如果你熟悉ruby的gem，Python的pypi、setuptools，PHP的pear，那么你就知道NPM的作用是什么了。 NPM 是 Node Package Manager （node 包管理器）的缩写，它是用于安装 NodeJS 软件包或模块的命令行软件包管理器。我们发布过一个指南描述了如何使用 NPM 管理 NodeJS 包。你可能已经注意到，使用 Npm 管理 NodeJS 包或模块并不是什么大问题。但是，如果你不习惯用 CLI 的方式，这有一个名为 NDM 的桌面 GUI 程序，它可用于管理 NodeJ...
前言最近新起了一个多页项目，之前都未使用 webpack4，于是准备上手实践一下。这篇文章主要就是一些配置介绍，对于正准备使用 webpack4 的同学，可以做一些参考。 webpack4 相比之前的 2 与 3，改变很大。最主要的一点是很多配置已经内置，使得 webpack 能“开箱即用”。当然这个开箱即用不可能满足所有情况，但是很多以往的配置，其实可以不用了。比如在之前，压缩混淆代码，需要增加uglify插件，作用域提升(scope hosting)需要增...
在做项目的时候，最好只使用一套组件库，但是很多时候我们的组件库里面没有我们需要的组件，这个时候我们还是需要自己写组件了，vux里面就没有环形进度条组件，所以需要自己写一个。 查找资料后发现了一个很好的实现方式，通过svg来实现，以前的时候学过一点svg但是没有怎么深入了解过。。。现在看来真是罪过，给出参考链接 https://segmentfault.com/a/1190000008149403 可以看出原作者使用了两种方式，我们选择了第二种，简单，...
Vue是一款比较流行的JS库，本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目 一、Vue常用UI组件 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2611 - 三端样式一致的响应式 UI...
在Vue单页应用中，如果在某一个具体路由的具体页面下点击刷新，那么刷新后，页面的状态信息可能就会丢失掉。这时候应该怎么处理呢？如果你也有这个疑惑，这篇文章或许能够帮助到你 一、问题 现在产品上有个需求：单页应用走到某个具体的页面，然后点击刷新后，刷新的页面要与刷新前的页面要保持一致。 这时候就需要我们保存刷新之前页面的状态。 二、一种解决方案 在这个Vue单页应用中，王二是用Vuex作为状态管理的，一开始王二的思...
一、使用方法 官网地址 参考此文章（点击我） 二、常见情况 图片需要动态获取时待数据加载成功且渲染完毕后，进行节点初始化。例： axios.post(‘接口地址, 参数).then(response => { this.pages = response.data; //pages 渲染数据的数组this.$nextTick(() => { //渲染结束// mySwiper 里面的属性按需配置，详情见官网let mySwiper = new Swiper(".swiper-container", { initialSlide :0,//默认播放（值为图片下标）loop: false,...
ajax缺点是破坏了浏览器的前进后退，因为ajax的请求不会留在历史记录中。pjax就不一样了，pjax被解释成ajax+pushState的封装，因为它把ajax的请求写入历史记录，并反映在地址栏，这样用户就能愉快地使用前进后退了。pjax有好几个实现方法，这里使用最常用的Jquery库，使用jquery.pjax.js。演示代码的服务器端使用PHP脚本语言。 Pjax用在那儿？就说百度云盘吧，这个大家肯定都用过。百度云盘PC端，在点击打开某个文件夹后会打开这个...
一般单页面应用，例如vue都是通过vue-router来做跳转，不会像多页应用一样另起新页面显示，但是也不排除一些业务上的需要。 一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定： this.$router.push({name: abc})以上是常规的通过路由的页面跳转方法。 我们现在的需求是另外开启一个新页面来显示跳转到的页面，原本的窗口保持页面不变。const { href } = this.$router.resolve({name: abc})window.open(href, _blank, to...
首先，必须安装vuex的依赖 npm install vuex --save-dev 创建专属vuex的文件夹和store.js: store.js里引入并应用插件vuex 定义常量state,用于存放变量&&定义常量mutations存放对变量的处理方法： 导出Vuex.store的实例，参数为刚才定义的state和mutations: 最后，还要在入口js文件引入到Vue的实例之中： 之后，我们就可以在组件当中，调用到我们在vuex存放的变量和方法： 首先：在父组件调用变量headTitle: 需要用到计算属性comput...
1、前沿1.1、什么是SSRSSR（服务端渲染）顾名思义就是将页面在服务端渲染完成后在客户端直接展示。 1.2、客户端渲染与服务端渲染的区别 传统的SPA模式 即客户端渲染的模式 Vue.js构建的应用程序，默认情况下是有一个html模板页，然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 -> 用户S...
前言 本文讲述怎么实现动态加载组件，并借此阐述适配器模式。 一、普通路由例子import Center from page/center; import Data from page/data;function App(){return (<Router><Switch><Route exact path="/" render={() => (<Redirect to="/center" />)} /><Route path="/data" component={Data} /><Route path="/center" component={Center} /><Route render={() => <h1 style={{ textAlign: center, marginTop: 160px, color:rg...
vue的render函数在日常开发中被广泛应用，今天以ElementUI中的table表头重构为引，实际应用一下借助render函数实现表头搜索，不足之处请多多指教！ 首先引入官方demo <el-table :data="tableData" style="width: 100%" :border="true"><el-table-column prop="date" label="日期" min-width="20%" align="center"></el-table-column><el-table-column prop="name" label="姓名" min-width="60%" align="center"></el-table-column>...
对于一个网站来说,即需要h5页面也同时需要web页面,而h5和web页面共用很多代码,不做响应式,只能拆分两个页面来写,一个h5,一个web.用vue cli3怎么配置h5与web的应用呢? 解决思路:首先,需要产生多页面应用,用webpack配置成多页面应用,一个h5一个web,这个网上已经有很多教程了,下面会再整理一次,接着把所有公共的代码提到多页面目录外面. 我们看一下官网给的 multi-page 的配置：需要在 vue.config.js 配置 pages，示例如下： pages: {...