安装
全局安装
yarn add xwl-cli -g / npm install xwl-cli -g
在任意位置都可以使用 xw
命令
局部安装
yarn add xwl-cli -D/-S / npm install xwl-cli -D/-S
只有在当前目录下才可以使用 xw
命令
命令介绍
xw -V 查看版本号
xw -h 查看帮助信息
列出了该脚手架的所有功能命令并含有详细的描述信息
xw d <directory> [repository] 下载仓库模版
<directory> 本地目录名
[repository] 就是需要下载的仓库名 -> 由 用户名/项目名 组成
sudo xw d aa
sudo(在 mac 下才需要)
xw r <viewPath> <routePath> [routeName] 自动化路由
<viewPath> vue 文件路径字符串,已‘/’分割路径层级
<routePath> 路由文件路径字符串,已‘/’分割路径层级
[routeName] 路由名称
xw s 连接服务器(该命令还未实现,没有服务器实践)
可以通过 【ssh2】 连接服务器
xw b 打包并发布
在项目根目录下执行 xw b 会执行一系列的操作,如下:
- 选取分支、拉取远程服务代码
- 安装依赖
-
打包
npm run build
-
移动打包文件到服务静态目录
实现
所需工具类
chalk
输出色彩文本commander
定义交互命令download-git-repo
git 相关操作inquirer
收集用户的操作javascript-stringify
字符串转对象log-symbols
警告信息ora
加载提示shelljs
shell 脚本ssh2
连接服务器
初始化脚手架
-
npm init
初始化项目配置
bin
添加可执行文件
!/usr/bin/node是告诉操作系统执行这个脚本的时候,调用/usr/bin下的node解释器;
!/usr/bin/env node这种用法是为了防止操作系统用户没有将node装在默认的/usr/bin路径里。当系统看到这一行的时候,首先会到env设置里查找node的安装路径,再调用对应路径下的解释器程序完成操作。
!/usr/bin/node相当于写死了node路径;
!/usr/bin/env node会去环境设置寻找node目录,推荐这种写法
-
npm link [path]
用来在本地项目和本地npm模块之间建立连接,可以在本地进行模块测试 (不加参数就是全局) -
npm unlink [path]
解决关联
功能命令实现
xw d <directory> [repository] 下载仓库模版
主要通过
download-git-repo
包将资源下载到本地
【注意点:】 仓库名的填写 请看上面的使用
核心代码:
xw r <viewPath> <routePath> [routeName] 自动化路由
xw r default/page1 default/page page1
通过解析 viewPath 生成对应的 vue 模板(分割字符串、检测文件/夹状态、写文件) 通过解析 routePath 生成对应的 vue 模板(分割字符串、检测文件/夹状态、读写文件、对象字符串之间的转换)
xw b 打包并发布
拉取git服务器代码、依赖安装、打包、移动打包文件
发布
npm adduser 注册 npm 账号
npm login 登录 npm 账号
npm publish 发布 npm 包
发布不成功的原因:
- 包名已被占用
- 登录的账号没有进行邮箱验证
验证是否发布成功
-
登录 npm 账号查看
-
npm install [包名]
更新包
1、修改
package.json
里面的version
,必须比上一次的大
2、npm publish
npm unpublish [包名] 删除包
项目地址
博文推荐
- 封装一个简单的 WebSocket 库
- 笔记:Vue 常见面试题汇总及解析
- Vue3.0 中 Object.defineProperty 的代替方案 Proxy
- vue 3.0 —— 之初体验一
- 一张图搞懂原型、原型对象、原型链
- Promise 原理篇 = 从 0 到 1 构建一个 Promise
【笔记不易,如对您有帮助,请点赞,谢谢】