Vue 项目开发规范
基础规范 项目命名 全部采用小写方式, 以中划线分隔。 12正例:`smart-admin`反例:`mall_management-system / mallManagementSystem` 目录、文件命名 目录、文件名 均以 小写方式, 以中划线分隔。 12正例:`/head-search/`、`/shopping-car/`、`smart-logo.png`、`role-form.vue`反例:`/headSearch/`、 `smartLogo.png`、 `RoleForm.vue` 单引号、双引号、分号 html 中、vue 的 template 中 标签属性 使用 双引号 所有 js 中的 字符串 使用 单引号 所有 js 中的代码行换行要用 分号 Vue3 组合式 API 规范 使用 setup 语法糖 组件必须使用 setup 语法糖 setup 大法方便简洁 全局都要使用 setup 语法糖 组合式 Composition API 规范 组件内必须使用模块化思想,把代码进行拆分;参照 vue3 官方文档对于 Compositio...
Web 开发规范
什么是好的代码? 满足业务需要:代码是来实现业务的,如果业务都实现不了,代码也就没什么价值了 代码尽可能的清晰明了:就是让小白也能看懂你的代码 代码尽可能的少:在保证清晰明了的前提下,能少一行少一行,能少一个类少一个类,能少一行注释少一行注释 代码尽可能复用性和模块化:在保证清晰明了和尽可能少的前提下,能复用的代码尽量复用,能模块的尽量模块 英文单词命名规范 无论前端代码还是后端代码,都是由一个个单词组成的,所以好的命名规范至关重要: 1)合理使用正确的英文单词 一定要用英文,且单词正确,不要用汉语拼音; 英文单词一定要使用常用词; 英文单词要符合业务; 2)合理区分名词和动词 项目名、类名、数据库名、表名应该用名词,比如: OrderService。 具体的方法名应该是 动词 或 动名词,比如:创建订单 createOrder,查询订单 queryOrder。 3)各个端、数据库、等命名要统一 前端、后端、移动端、数据库、服务器对某个业务或者某个业务单元的命名必须保持一致。 12345比如 `通知` 功能,各个端定义为: - 后端: `not...
内网部署 YApi
Ubuntu 20.04 虚拟机下载手动部署 YApi 服务。 适用 Yapi v1.10.x 版本 环境要求 nodejs 版本 v12.x; mongodb 版本 v4.4; 安装 nodejs 系统默认 nodejs 版本为 10.x ,直接安装可能失败,需要升级至 12.x 版本。 12345678# 导入秘钥,注册源,更新curl -fsSL https://deb.nodesource.com/setup_12.x | sudo -E bash -# 安装sudo apt install -y nodejs# 替换 npm 源npm config set registry https://registry.npmmirror.com 安装 mongodb 12345678# 导入秘钥wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -# 注册源echo "deb [ arch=amd64,arm64 ] https://repo.mo...
CSS 弹性布局
Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式: 在不同方向排列元素。 重新排列元素的显示顺序。 更改元素的对齐方式。 动态地将元素装入容器。 基本概念 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。 在 Flexbox 模型中,有三个核心概念: flex 项(注:也称 flex 子元素),需要布局的元素。 flex 容器,其包含 flex 项。 排列方向(direction),这决定了 flex 项的布局方向...
安装 node-sass 正确姿势
windows 下面安装 node-sass,确实令人头痛,正确姿势如下: 修改 NPM 镜像 查看当前设置: 1234# npm 命令npm config get registry# yarn 命令yarn config get registry 修改为淘宝镜像: 123456# npm 命令# npm config set registry http://registry.npm.taobao.org/npm config set registry https://registry.npmmirror.com# yarn 命令# yarn config set registry http://registry.npm.taobao.org/yarn config set registry https://registry.npmmirror.com 安装 windows 平台编译环境 需要在管理员权限下安装: 123456npm install -g node-gyp# 安装 python 和 vs-build# 此过程可能长时间没有反映,可从控制面板中检查是否安装成功# 安...
Git 中 CRLF 与 LF 的转换
换行符在不同的操作系统上的表示 首先要理解的一点是,对于不同的操作系统,对于换行符的表示是不一样的。也就是说当我们在编辑一个文件,在键盘上按下回车键的时候,对于不同的操作系统保存到文件中的换行符是不一样的。见下表: 123456789CR: 表示回车\rLF: 表示换行\nCRLF: 表示回车换行\r\n敲下回车键,不同的操作系统保存到文件中的值:Windows:使用的是 CRLF ==> 即 \r\n,文件中保存的是 \r\nLinux/Unix: 使用的是 LF ==> 即 \n,文件中保存的是 \nMacOS: 使用的是 CR ==> 即 \r,文件中保存的是 \rMacOS X系统:使用的是 LF ==> 即 \n,文件中保存的是 \n(MacOS X 已经改成和 Unix/Linx 一样使用 LF) 问题: 既然不同的操作系统,对于换行符使用不同的表示形式,如果一个团队在开发一个共同的项目,如果你使用的是 windows 系统,而你的小伙伴用的是 Mac 的话,当你们使用 git 协同开发软件时,就会出现换行符不统一的问题。 虽然对于不同的操作系...
NPM 包发布流程
注册 NPM 账号 点击 注册账号,并完成邮箱验证。 初始化 NPM 项目 123456# 创建项目目录mkdir <project># 进入项目目录cd <project># 初始化项目npm init 执行上述命令,根据提示输入相关信息,完成后目录下会生成 package.json 文件,内容如下: 1234567891011121314{ "name": "demo", "version": "1.0.0", "description": "A demo projcet of npm.", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" ...
Elementary OS 使用心得
快速、开源的 Windows / macOS 替代方案。 安装 VirtualBox Elementary OS 增加第三方软件包源 安装某些软件时需要增加第三方软件包源,如 elementary-tweaks 系统调整工具。使用 add-apt-repository 要先安装以下软件包: 12sudo apt-get install python-software-propertiessudo apt-get install software-properties-common 使用 gdebi 安装 deb 软件包 安装已编译二进制 deb 软件包时,要用到 gdebi 工具: 1sudo apt-get install gdebi 安装 fcitx 小企鹅输入法 安装软件包及配置工具: 123sudo apt-get install fcitx fcitx-config-gtk fcitx-pinyin sudo apt-get install fcitx-table-allsudo apt-get install im-config 此时请重启系统,再通过 i...
MariaDB 数据库安装设置
安装 Ubuntu18 系统 设置 MariaDB 仓库 默认情况下 MariaDB 的包没有在 Ubuntu 仓库中,请参考 MariaDB 官方进行设置 移步。 参考官方设置时请选择有效的仓库镜像地址,下面选择的是清华大学镜像,测试可用。 123sudo apt-get install software-properties-commonsudo apt-key adv --fetch-keys 'https://mariadb.org/mariadb_release_signing_key.asc'sudo add-apt-repository 'deb [arch=amd64,arm64,ppc64el] http://mirror.its.dal.ca/mariadb/repo/10.4/ubuntu bionic main' 安装 安装过程中要输入 MariaDB 的 root 密码。 12sudo apt updatesudo apt install mariadb-server 基本操作 12345678#...
Cmder 安装与配置
Cmder 安装 下载地址: Cmder Cmder In GitHub 从官网下载 Cmder 解压到任意目录即完成安装。 Cmder 有 mini(6MB)和 full(84MD)两个版本,都是 portable 的,解压即可使用。 外观配置 Font,右键 Tab 栏空白处,弹出菜单选择 Settings,映入眼帘的就是字体设置了。建议使用字体 Input Mono、Inconsolata、Consolas、Courier New。还可以加上中文字体,“Main font” 设置下方的"Alternative font" 添加 CJK 字体,在设置 “Unicode ranges” 成 CJK 的就好了。 Color Schemes,同样是在 Settings 中,左侧树形菜单中选择 Features->Colors,就能来到 Scheme 设置界面。Cmder 自带的 Scheme 很丰富,也可以通过自定 Scheme,应用网络上简洁好看的风格。Github | joonro/ConEmu-Color-Themes 提供了当前流行...











