blog
blog copied to clipboard
huangshuwei
🈲黄书伟的个人博客
### 前言 如题 就是windows 下安装使用 nginx ### 下载安装 [下载地址](http://nginx.org/en/download.html),找一个windows 的稳定版本，然后下载。下载完实际是一个压缩包，解压到C盘（其他盘也行），然后运行nginx.exe 一个窗口一闪而过，还以为是幻觉，此时防火墙可能会提示是否允许，只要不是病毒就允许。此时你已经把nginx 运行起来了。。。 验证下，直接在浏览器输入http://localhost/ 然后出来这个界面就证明nginx 成功运行了：  ### 常用命令 > 命令要定位 `nginx` 目录下 - 启动 nginx 服务 `nginx.exe` - 关闭 nginx...
### 前言 从 webstorm 转到 vs code 一阵子了。期间vuejs、react+ts、electron 项目不断切换，还没有领略到vs code 给我极致体验，问题倒是不少，毕竟只是个编译器，孰能生巧吧。在此记录一些折腾的过程，方便后面自己查看。 ### typescript 关闭 .js 文件检测 没太明白为什么 .js 文件会被识别为 .ts 文件,有一大推修改建议和报错，干脆关上。 具体步骤，设置->输入“typescript”->勾掉“启用/禁用 JavaScript 验证” ### 固定打开的文件 > 默认情况我们打开了几个页面，我们想切换最近的两个页面，通常使用`ctrl+tab`键切换后发现并不是最近的两个文件。下面配置可以解决这个问题 ``` "workbench.editor.enablePreview":...
### 前言 现有个场景需要使用 动态组件，但是传参问题无法很好的解决。今天尝试了一种方案还不错，特此记录下 **启发** 思路来自以下等价方式 ``` ``` 等价于 ``` ``` **动态组件封装** 约定将所有组件的传参都通过对象的形式 ``` // dynamic-comp.vue export default { name: "DynamicComp", props: { currentComp: { type: String, required: true },...
### 安装 yarn 参考[官网](https://yarnpkg.com/en/docs/install#windows-stable) ### 常用命令 **初始化项目** ``` yarn init ``` **安装搜索依赖包** ``` yarn ``` 或者 ``` yarn install ``` **安装项目依赖包** > 在项目中安装 ``` yarn add [package] yarn add [package]@[version]...
### 前言 [上一篇](https://github.com/huangshuwei/blog/issues/39)介绍了使用` electron-react-boilerplate`模板基本的样式使用问题。现在咱们看下项目中使用了 `ant.design` 如何进行主题定制 > 这个问题本质是如何引入 `less`文件，具体看下文 ### ant.design 主题定制方式 这是[官方主题定制文章](https://3x.ant.design/docs/react/customize-theme-cn)，其中最简单的方式是覆盖`ant.design`主题的`less` 文件。然而` electron-react-boilerplate`模板并没有`less`文件的配置，下面我们要进行改造 ### 安装并配置 less loader ``` yarn add less less-loader ``` 配置开发环境loader。这里特别要注意的事，我们要让`less` 文件也遵循` electron-react-boilerplate`模板的`css module`方式。 即：`.global.less`可以作为全局的样式使用，而`.less`文件要遵循`css...
### 前言 项目中使用状态管理器操作数组是很频繁的，找到最优的方案会让操作数组更便捷高效 ### 新增数组某项 简单的往数组中新增。使用 `push` 插入 ``` ... state: { arr: [ {name: 'a', id: 0} ] }, mutations: { addArrayItem(state, {arrItem}) { state.arr.push(arrItem) } } ... ```...
## 安装、更新 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 等等）。但是会有跨操作系统的问题 ### 网页应用的优点 - 版本更新简单 - 使用简单，无需下载