前置条件:熟悉使用 Javascript + HTML5 + css3。 理解 ES2015 Module 模块(export、import、export-default)。 了解 nodejs 基础知识，npm 常用命令，以及 npm script 使用 (vue 项目中使用 npm 进行包管理)。 了解 webpack 打包工具 (常用配置选项以及 loader 概念)。(webpack webpack.github.io/ 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出它们的依赖关系，将它们打包为可部署的静态资源。webpack 的使用...
一项颠覆性的技术进入技术市场总会带来一阵震惊，但随之而来往往是被放弃。然而，Node.js 当然不是这样的情况，它是一个开源的、跨平台的基于 Chrome 的 JavaScript 运行时。Node.js 由 Ryan Dahl 于 2009 年开发，该平台现在已成为实时 Web 应用开发的独特选择，通过提供高度交互的用户体验来提高 ROI。 使用 Node.js 的最大优点是开发人员可以在客户端和服务器端编写 JavaScript。值得一提的是，像 PayPal, Yahoo, eBay, Netflix...
在需要身份验证的前端应用里，我们经常想通过用户角色来决定哪些内容可见。比如，游客身份可以阅读文章，但注册用户或管理员才能看到编辑按钮。 在前端中管理权限可能会有点麻烦。你之前可能写过这样的代码： if (user.type === ADMIN || user.auth && post.owner === user.id ) {... }作为代替方案，一个简洁轻量的库——CASL——可以让管理用户权限变得非常简单。只要你用CASL定义了权限，并设置了当前用户，就可以把上面的代码改...
我们曾经讲过JS由三部分组成，其中一个部分就是BOM，用于对浏览器进行操作。这节课我们主要就来介绍BOM。 BOM基础 我们先来看一个BOM的最基础功能：打开、关闭窗口： <html><head><meta charset="utf-8"><title>无标题文档</title></head><body><input type="button" value="打开窗口" onclick="window.open(http://www.zhinengshe.com/);" /></body></html>open方法用于打开一个窗口，相对的close方法用于关闭一个窗口。这里我们可...
申请百度统计后，会得到一段JS代码，需要插入到每个网页中去，在Vue.js项目首先想到的可能就是，把统计代码插入到index.html入口文件中，这样就全局插入，每个页面就都有了;这样做就涉及到一个问题，Vue.js项目是单页应用，每次用户浏览网站时，访问内页时页面是不会刷新的，也就意味着不会触发百度统计代码；所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量，却无法统计到内页的访问流量。 解决方法在main.js文件中...
效果：实例如下所示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0px;margin: 0px;}li{width: 80px;height:300px;float: left;overflow: hidden;list-style: none;}</style><script type="text/javascript "src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <script >$(function () {$("ul li").mouseover(function (){$(this).stop().an...
问题描述：Vue单页面用按F5强刷，数据就恢复初始了，这怎么破？ 解决方案： store.subscribe((mutation, state) => {sessionStorage.setItem(mobileState, JSON.stringify(state)); })if (sessionStorage.getItem(mobileState)) {state = JSON.parse(sessionStorage.getItem(mobileState));} else {state = stateOrg;}ps:下面看下Vue父组件接收不到子组件$emit事件的原因分析 通常有两种情况： 1.事件名称不全是小写。事件名称要求...
背景由于ons（阿里云 RocketMQ 包）基于 C艹 封装而来，不支持单一进程内实例化多个生产者与消费者，为了解决这一问题，使用了 Node.js 子进程。 在使用的过程中碰到的坑 发布：进程管理关闭主进程后，子进程变为操作系统进程（pid 为 1）几种解决方案 将子进程看做独立运行的进程，记录 pid，发布时进程管理关闭主进程同时关闭子进程主进程监听关闭事件，主动关闭从属于自己的子进程子进程种类 spawn：执行命令exec：执行命令（新...
使用 vux UI组件库使用 vue-navigation 缓存页面，此库实现了前进刷新后退读缓存的功能，像原生APP导航一样。用子路由的方式实现tabbar有bug，用vuex解决了。使用 lib-flexible 解决移动页面适配来一个清单 "dependencies": {"fastclick": "^1.0.6","lib-flexible": "^0.3.2","lodash": "^4.17.4","vue": "^2.5.2","vue-navigation": "^1.1.3","vue-router": "^3.0.1","vuex": "^2.1.1","vuex-i18n": "^1.3.1","vux": "^2.7.8"}微信...
Electron 可以让你使用开发 Web 的技术去开发跨平台的桌面端应用，由 Github 主导和开源，大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的。 Electron 是 Node.js 和 Chromium 浏览器的结合体，用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI，通过 Node.js 去和操作系统交互。 当你在 Electron 应用中的一个窗口操作时，实际上是在操作一个网页。当你的操作需要通过操作系统去完成时，网页会通过 Node.js 去和操作...
对于React，Vue构建的单页面应用老说，SEO是一个众所周知的问题。服务端渲染(SSR-server Side Render)是目前看来最好的解决办法。React应用有Next.js，对应Vue的解决方案就是Nuxt.js。1.简介 官网：https://nuxtjs.org/GitHub：https://github.com/nuxt/nuxt.js Nuxt.js 是什么？ Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。 我们的目标是创建一个灵...
关于webpack的配置和使用，网上已经有许多文章了，大多是在讲单页应用，当我们需要打包多个html时，事情就变得麻烦起来。怎么在webpack-dev-server里使用路由？怎么打包多个html和js chunk并自动更新md5？本文讲的就是如何解决这些问题。 这里假设你对Webpack已经有最基础的了解 需求来看下我们的需求: 使用webpack-dev-server做开发时的服务器在webpack-dev-server里使用路由，访问/a时候显示a.html，/b显示b.html打包成多个html，...
前言 Electron可以使用HTML、CSS、JavaScript构建跨平台桌面应用，可是在使用到React和Webpack时，会遇到一些配置问题，本文将针对React+Webpack下的Electron配置提供一个通用的解决方案。 环境配置"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-plugin-transform-class-properties": "^6.24.1","babel-plugin-transform-object-rest-spread": "^6.26.0","babel-preset-env": "^1.6.1","babel-preset-react": "^6.24.1...
本文介绍了如何使用 vue-cli 开发多页应用，分享给大家，具体如下： 修改的webpack配置文件全局配置修改 webpack.base.conf.js打开 ~\build\webpack.base.conf.js ，找到entry，添加多入口 entry: {app: ./src/main.js,app2: ./src/main2.js,app3: ./src/main3.js, }, 运行、编译的时候每一个入口都会对应一个Chunk run dev 开发环境修改 webpack.dev.conf.js打开 ~\build\webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPl...
有用的符号： | 竖杠后的字符会被原样输出 点表示下一级的所有字符都会被原样输出，不再被识别。（就是|的升级版，实现批量） include 表示引用外部文件 短杠说明后面跟着的字符只是一段代码（与|的区别就是，|后面的内容会被显示，而短杠后面的内容直接不显示了！） 例子: js： const jade = require(jade); console.log(jade.renderFile(./xxx.jade,{pretty:true,name:singsingasong}))jade： |的应用.的应用include的应用调用变...