README
基于 Ant Design Vue 二次开发
以下 antd 均为 Ant Design Vue 的简称
使用
git
提交请使用git commit
运行格式化以及提交模板。
继承所有Ant Design Vue 组件,统一命名,e.g.:
在antd
中按钮的组件为:a-button
使用本组件库应为:ni-button
组件表现一致。
其他扩展组件参考项目中的组件文档。
修改所有antd
为nid
,ant
前缀为ni
。
环境配置
由于原
Antd
限制,推荐运行环境为Mac OS
或Linux
。
Ubuntu Server 20.04.2 LTS
)
Mac OS / Linux (示例系统为为同时兼顾 npm 发布以及国内镜像加速,此处使用 npm 进行发版,yarn 进行包管理
node
以及yarn
安装安装
nvm
使用
curl
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
使用
wget
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
使用
nvm
安装Node.js LTS
nvm install --lts
node -v
查看node
版本
安装
yarn
npm --registry https://registry.npm.taobao.org install -g yarn
(npm
临时使用淘宝镜像安装,此处不配置npm
镜像是因为后面发布无需频繁切换registry
进行发布以及安装依赖)yarn -v
查看yarn
版本
设置
yarn
仓库地址为淘宝镜像$ yarn config set registry https://registry.npm.taobao.org
windows
在windows
中目前已实践两种方式,以下方式根据习惯和场景二选一即可:
- 使用
WSL2(Windows Subsystem for Linux)
通过网络位置挂载到windows
中开发 - 在
windows
中采用虚拟机 +ssh
+SFTP
的方式开发。
注意:
操作前请在
BIOS
中开启CPU
虚拟化。先开启虚拟化,然后再开启
WSL
,不要开启WSL
重启时设置虚拟化,有可能导致windows
无法正常引导开机。
WSL 方式
以下
WSL
泛指WSL2
安装
WSL 2
的Linux
内核更新包将
WSL 2
设置为默认版本wsl --set-default-version 2
-
此处示例使用 Ubuntu 20.4
成功进入
WSL
后在windows
的资源团管理器地址栏中输入\\wsl$
即可看到WSL
的目录在终端中输入
wsl
即可进入系统,根据习惯把项目clone
到linux
的系统环境目录下,例如/home/ubuntu/work
进行开发由于文件系统的问题,
webpack(node)
无法监听在windows
文件系统的文件更新,例如项目在D:\hello-world
中,对应wsl
的目录是/mnt/d/hello-world
,修改其中的文件,项目是无法更新的。正确的做法是把项目放到WSL
的/home/ubuntu/hello-world
中,然后编辑\\wsl$\Ubuntu-20.04\home\ubuntu\hello-world
中的文件。
虚拟机方式
安装虚拟机,
VMware
/VirtualBox
二选一- 下载VMware
- 下载VirtualBox
安装
Linux
,此处安装Ubuntu Server 20.04.2 LTS
- 下载地址
- 安装过程中记得勾选安装
open-ssh
方便后面使用 - 安装时切换镜像为清华大学镜像
https://mirrors.tuna.tsinghua.edu.cn/ubuntu/
- 其他安装过程下一步即可
安装
open-ssh
(系统安装过程中安装过则此步可跳过)- 更新版本:
sudo apt update
- 安装
ssh
:sudo apt install openssh-server -y
- 查看服务状态:
sudo systemctl status ssh
- 如果没有开启则启动:
sudo systemctl start ssh
- 更新版本:
如果使用
VMware
到此处即可使用electerm、mobaxterm等ssh
软件进行连接,如果使用VirtualBox
并使用默认网络配置则需要配置端口转发,把虚拟机的22
端口转发到本机某端口上安装安装
node
以及yarn
,方法同上面的Mac OS / Linux
示例生成
ssh key
并添加到你的Gitlab中:ssh-keygen -t rsa -C "你的邮箱"
clone
代码clone
代码到虚拟机中clone
代码到本机中$ git clone git@gitlab.navinfo.com:fe/ni-design-vue.git
WebStorm
远程开发
配置此步骤实现在
windows
中编辑代码在ubuntu
中同步修改,实际代码是在ubuntu
虚拟机中运行(
JetBrains
系列IDE
均可),其他IDE
自行查找方法
前提条件
在windows
与Ubuntu
系统下都有着项目的同一份代码。
比如:
Ubuntu
中项目代码地址:~/work/ni-design-vue/
swindows
中项目地址:D:/work/ni-design-vue/
配置
- 使用
WebStorm
打开项目 - 在菜单中找到:工具(Tools) → 部署(Deployment) → 浏览远程主机(Browse Remore Host)
- 点击
...
添加主机- 类型选择
SFTP
- 在
SSH
配置中填写虚拟机的IP
,端口以及用户名密码 - 根路径根据实际情况填写,比如在
ubuntu
中我的项目路径为~/work/ni-design-vue/
,我的用户名是ubuntu
,则我的根路径填写/home/ubuntu/work
- 切换到映射(Mappings) 选项卡在部署路径中填上
/ni-design-vue
(根据实际情况填写,上一步中的根路径 + 这一步中的部署路径为项目的完整路径即可)
- 类型选择
- 勾选 工具(Tools) → 部署(Deployment) → 自动上传(Automatic Upload)
- 在编辑器中修改代码*(此处为修改
windows
中的文件)*会被同步到ubuntu
中
开发
克隆项目,在其他分支(默认有一个ni-design
分支)中修改。
为保证组件一致性,修改前请merge
antd
原本的next分支到开发分支中。
main
分支为发布分支。
安装依赖
$ yarn
运行开发环境
$ yarn dev
npm
仓库中
发布到使用
npm adduser
或npm login
无反应的时候可以尝试添加-d
参数
首次发包
添加npm
账号:
$ npm adduser
$ Username: navinfo_fe
$ Password: 联系上一个管理员
$ Email: 你的邮箱
# 成功提示:
$ Logged in as navinfo_fe on https://registry.npmjs.org/.
非首次发包
登录:
$ npm login
输入账号密码即可。
发布
修改
package.json
中的版本号。在
mac
或linux
环境下直接运行以下命令即可自动打包和发布:$ npm run pub
windows
环境下请参考上方的环境配置。