Huang ShuWei
Huang ShuWei
## 安装、更新 npm 使用npm 首先你要先安装nodejs，如果要安装nodejs 请移步 [nodejs官网](https://nodejs.org/en/download/)。 安装和更新npm 都是使用如下命令： ``` $ npm install npm -g ``` ## 更改 npm 的缓存、全局包文件夹 ## npm 安装完成后，除了会在nodejs 安装目录中多出一个 npm 目录外，还有两个文件夹比较特别，这两个文件夹不在nodejs 的安装目录下（我的是在C:/Users/Administrator/AppData/Roaming/下）。这两个文件夹分别是： - **npm-cache**：缓存模块安装目录 -...
### 前言 本文记录脚手架开发中的注意事项。关于脚手架开发可以参考[官方文档](https://docs.npmjs.com/cli-documentation/) ### npm link 这个命令，在开发脚手架**调试阶段**中非常有用，可以对开发中的脚手架进行调试。用法是先定位到当前脚手架目录，再执行命令。如： ``` $ cd /path/my-cli $ npm link ``` `npm link` 相当于在全局安装了此脚手架，你可以在你的全局包中找到此脚手架。 一旦链接到全局，就非常方便了，你只要按照计划调用自己脚手架即可。 **注意1**： 如果测试项目已经**安装了此脚手架的某个版本**，并且执行脚手架命令是通过 `package.json` 下的 `scripts`节点，那么你的调试不会生效，因为优先是先找 `node_modules`下的脚手架。此时也有办法调试，你只需要不通过`package.json` 下的 `scripts`节点调用即可，也就是通过命令行去执行。 **注意2**： 虽然通过`npm link`...
### 前言 记录样式相关的问题 ### CSS Modules electron-react-boilerplate 项目使用的是 [css-modules](https://github.com/css-modules/css-modules) ### 全局样式 使用后缀 `.global.(css,scss,sass)`的样式可以作用到全局范围，其他后缀为非全局样式。 ### 引入外部样式 如使用 `ant` 组件，那么需要在后缀为`.global.(css,scss,sass)`引入。引入规则需要添加前缀`~`。如： > `~`符号会从 `node_modules`查找 ``` @import '~antd/dist/antd.css'; ``` ### 使用`scss` 直接创建后缀为 `.scss`文件即可 ###...
### 前言 选择做一个桌面应用还是网页应用，那么你要知道他们的区别在哪里 ### 桌面应用的优点 - 本地通知功能 - 开机启动 - 调度本地资源，读写等 - 离线功能 - 不用考虑浏览器兼容性（比如 flex 布局、ES6 等等）。但是会有跨操作系统的问题 ### 网页应用的优点 - 版本更新简单 - 使用简单，无需下载
### 前言 最近在家办公，发现访问外网效果极差。多次通过 `yarn` 安装 electron 失败后，探索新的方案。特此记录。 ### 操作步骤 **步骤1-通过yarn 或者 npm安装 electron** ``` yarn add [email protected] ``` 这个目的不是为了安装成功（能成功后面的步骤就不用看了），而是生成目录结构和基础文件。如 electron 目录、index.js 等 **步骤2-下载 electron 压缩包** 首先找到 electron github 上发布的包地址。如windows 64位环境可用这个模板地址：...
### 前言 这里记录下 vue 路由配置成 history 模式的过程。 ### 路由 hash 模式 vue 路由默认是 hash 模式。使用这种模式url 地址上模式会有一个路由标识 ‘#’，乍一看以为是锚点。 这种模式存在以下缺点： 1、本身与锚点冲突，导致页面需要用到锚点定位时比较困难 2、路由切换滚动行为还原困难，当然可以通过其他方式实现，[参考这里](https://github.com/huangshuwei/blog/issues/6) 3、不利于 SEO 4、url 丑（哈哈，别当真） 既然用hash 模式不爽，那我们就改成 history 模式。 ### vue...
### 前言 修改了路由模式为 `BrowserRouter`，站点服务器也做好了配置。开发模式一切正常，发布后发现页面无法正常访问。这时候你就要想是否是资源路径配置的问题了。 > 看似是小问题，但常常会忽略，导致折腾了数个小时才排查到，具体细节不说了 ### 配置 如果是使用 `create-react-app` 这个打包奇慢无比的脚手架，你只需要在“官方文档”的帮助下，修改配置即可。在 `package.json` 文件中添加一个节点，具体为： ``` "homepage": "/" ``` --完--
### 前言 [上一篇](https://github.com/huangshuwei/blog/issues/30)已经介绍了如何在开发环境配置 react 路由 history 模式。这篇文章将介绍react 路由 history 模式应用发布后的配置。下面以 [IIS](https://docs.microsoft.com/zh-cn/iis/get-started/introduction-to-iis/introduction-to-iis-architecture)站点服务器配置为例，其他站点服务器类似 > react 路由 history 模式发布在web 站点服务器上需要额外的配置，否则无法正常访问 ### 安装 [IIS UrlRewrite](https://www.iis.net/downloads/microsoft/url-rewrite)使用 下载安装成功，需要在站点根目录创建 `web.config` 文件 ### 站点服务器只配置一个单页应用 配置如下 ``` ``` 如果单页应用的名称不是...
### 前言 如题，这篇文章记录 react 路由在开发阶段的 history 模式配置 > 1、项目以 [create-react-app](https://github.com/facebook/create-react-app) 生成为例 2、路由使用的是 [react-router-dom](https://github.com/ReactTraining/react-router) ### 修改项目中的路由模式 将 hash 模式 改为 history 模式，即： ``` import {HashRouter as Router} from 'react-router-dom' ``` 替换成...
**前言** 最近在用element ui做一个后台系统，发现当菜单数据变更后，菜单显示异常的问题，通过 vue 的devtool 发现，element ui 的菜单组件并没有很好的处理数据变化的渲染重置问题，比如默认菜单属性值变更后并不生效，当然还有其他的问题。 **方案一** 我想到的方案是当菜单数据变更后,通过`watch` 监听，先去销毁当前的菜单组件，然后再重现渲染。使用 `v-if` 可以解决这个问题 ``` export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reFresh= false this.$nextTick(()=>{ this.reFresh =...