walrus-cli
v1.0.14
Published
### 1. 简介
Downloads
16
Readme
Vue CLI 工具
1. 简介
这是一个用于 Vue 项目的 CLI 工具, 它可以快速创建 Vue 项目, 可以快速创建组件、插件、指令、Pinia Store 等元素, CLI 工具将会提供大量开箱即用的指令和插件, 用于提升工作效率。
2. 安装
首先，确保你的系统已安装 Node.js, 版本 >= 18, 然后通过以下命令安装此脚手架工具:
npm i walrus-cli -g3. 创建新项目
使用以下任何命令之一创建一个新的 Vue 项目:
# 创建项目
walrus create [project-name]
# 创建项目
walrus create
# 创建项目
ws c [project-name]
# 创建项目
ws c4. 运行项目
创建项目后, 进入项目目录并启动开发服务器:
# 进入项目目录
cd [project-name]
# 启动开发服务器
npm run dev5. 项目目录结构
|____.env.production # 环境变量 (生产环境)
|____.env.development # 环境变量 (开发环境)
|____webpack.config.js # webpack 配置文件(公共配置)
|____webpack.dev.js # webpack 配置文件 (开发环境)
|____webpack.prod.js # webpack 配置文件 (生产环境)
|____tsconfig.json # TypeScript 配置文件
|____.babelrc # babel 配置文件
|____postcss.config.js # postcss 配置文件
|____stylelint.config.mjs # CSS 语法检查
|____tailwind.config.js # tailwind css 配置文件
|____.eslintrc.js # ESLint 配置文件 (语法检查)
|____.eslintignore # ESLint 忽略清单配置
|____.prettierrc # Prettier 配置文件 (代码格式化)
|____.prettierignore # Prettier 忽略清单
|____lint-staged.config.js # 代码质量控制自动化
|____.editorconfig # 跨编辑器配置统一
|____.gitignore # Git 忽略清单配置
|____.browserslistrc # 支持的目标环境配置
|____package-lock.json # 软件包版本锁定
|____package.json # 软件包配置文件
|____readme.md # 项目自述
|____src # 项目源码目录
| |____docs # 文档目录
| |____plugins # Vue 插件目录
| | | |____global-components.ts # 用于注册全局组件
| | | |____global-directives.ts # 用于注册全局指令
| |____directives # Vue 指令目录
| |____apis # API 接口定义目录
| |____assets # 静态资源目录
| | |____images # 图片存放目录
| | |____styles # 样式存放目录
| | | |____base.pcss # 基础样式
| |____types # TS 类型声明文件
| | |____auto-import.d.ts # 自动导入的 API TS 类型声明文件
| | |____components.d.ts # 自动导入的 Component TS 类型声明文件
| | |____shims-images.d.ts # 图片类型声明
| |____stores # Pinia Store 存放目录
| | |____index.ts # Pinia 主文件
| |____utils # 工具目录
| | |____http.ts # 请求封装
| |____shared # 应用级公共组件
| |____layouts # 布局管理器
| | |____main-layout.vue # 主布局管理器
| |____views # 用于存储页面组件
| | |____home # 首页页面组件目录
| | | |____home-page.vue # 首页页面组件
| |____router # 路由目录
| | |____index.ts # 主路由文件
| |____main.ts # 应用逻辑入口
| |____App.vue # 应用根组件
| |____index.html # 应用结构入口6. VSCode 插件
7. 支持的 CSS 功能
- Stylelint: 用于 CSS 代码的静态分析和格式检查, 确保代码风格一致并减少错误。
- Tailwind CSS: 一个实用优先的 CSS 框架, 提供大量的预定义类, 帮助快速构建响应式设计。
- PostCSS Mixins: 允许在 CSS 中使用 mixins, 简化重复的样式定义。
- PostCSS Normalize: 自动引入 sanitize.css, 标准化不同浏览器的默认样式, 确保一致的外观。
- CSSNano: 一个 CSS 压缩工具, 优化和缩小 CSS 文件大小, 提高加载速度。
- PostCSS Preset Env: 允许使用现代 CSS 特性, 并根据目标浏览器自动进行转换和补全, 支持的特性包括:
自定义媒体查询 (Custom Media Queries): 使用自定义变量定义媒体查询。
自定义选择器 (Custom Selectors): 定义和使用自定义选择器。
环境变量 (Environment Variables): 使用环境变量来控制样式。
颜色函数 (Color Functions): 使用 color-mod() 函数进行颜色操作。
属性别名 (Property Aliases): 使用别名属性简化样式书写。
级联层 (Cascade Layers): 使用 @layer 规则定义级联层次。
逻辑属性 (Logical Properties): 使用逻辑属性和值来处理不同的书写模式。
选择器嵌套 (Selector Nesting): 使用嵌套规则简化复杂选择器的书写。
媒体查询范围 (Media Query Ranges): 使用范围语法定义媒体查询。
自定义属性 (Custom Properties): 使用 CSS 变量定义和使用自定义属性。
图片集 (Image Set Function): 使用 image-set() 函数定义响应式图片。
系统字体 (System UI Fonts): 使用系统字体栈。
伪类和伪元素 (Pseudo-classes and Pseudo-elements): 使用现代伪类和伪元素。
8. 自动导入
1. AutoImportApis
- 自动导入 API: 自动导入常用的 API, 如 vue, vue-router, pinia 等。
- 自定义导入: 支持自定义导入特定库的 API, 如 axios 和 axios-retry。
- 类型导入: 支持导入 TypeScript 类型, 如 axios 中的 InternalAxiosRequestConfig。
- 文件名自动导出: 根据文件名自动确定默认导出的名称。
- 目录自动导入: 自动导入指定目录下的文件, 如 ./src/apis/* 和 ./src/utils/*。
- Vue 模板支持: 在 Vue 单文件组件的模板中启用自动导入。
- 类型声明文件: 为 TypeScript 生成类型声明文件。
2. AutoImportComponents
- 自动导入组件: 自动导入指定目录下的 Vue 组件。
- 框架组件导入: 支持自动导入框架组件。
- 目录配置: 指定自动导入组件的目录, 如 src/shared 和 src/views。
- 深度搜索: 支持深度搜索目录中的组件。
- 类型声明文件: 为 TypeScript 生成组件的类型声明文件。
- 组件类型支持: 支持多种组件类型, 如 vue, tsx, jsx。
9. 类型别名
- @: 指向 src 目录，简化对 src 目录下文件的引用。
import MyComponent from '@/components/MyComponent.vue'- @apis: 指向 src/apis 目录，简化对 API 文件的引用。
import { fetchData } from '@apis/dataApi'- @images: 指向 src/assets/images 目录，简化对图像资源的引用。
import logo from '@images/logo.png'- @layouts: 指向
src/layouts目录，简化对布局组件的引用。
import MainLayout from '@layouts/MainLayout.vue'- @router: 指向
src/router目录, 简化对路由配置的引用。
import router from '@router/index'- @shared: 指向
src/shared目录，简化对共享组件或工具的引用。
import Button from '@shared/Button.vue'- @stores: 指向
src/stores目录，简化对状态管理文件的引用。
import useStore from '@stores/store'- @styles: 指向
src/assets/styles目录，简化对样式文件的引用。
import '@styles/main.css'- @views: 指向
src/views目录，简化对视图组件的引用。
import HomeView from '@views/HomeView.vue'- @utils: 指向
src/utils目录，简化对工具函数的引用。
import { formatDate } from '@utils/dateUtils'- @plugins: 指向
src/plugins目录，简化对插件的引用。
import myPlugin from '@plugins/myPlugin'- @directives: 指向
src/directives目录，简化对自定义指令的引用。
import vFocus from '@directives/focus'10. 创建文件
# type: 文件类型, 必选
# file-name：
# 文件名称, 可选, 支持批量创建文件, 文件名称用空格分隔,
# 文件名称中可携带路径
# .vue 后缀可以省略
walrus generate <type> [file-name]
# 创建组件
walrus generate component
# 创建组件
walrus generate component home
# 创建组件
ws g c
# 创建组件
ws g c home
# 例子
ws g c park/building/create-building.vue park/building/build-list# 创建 Pinia Store
walrus generate store
# 创建 Pinia Store
walrus generate store building/build-list
# 创建 Pinia Store
ws g s
# 创建 Pinia Store
ws g s building/create-building building/build-list# 创建指令 [创建指令模板, 选择 CLI 提供的内置自定义指令]
walrus generate directive
# 创建指令
walrus generate directive building/build-list
# 创建指令
ws g d
# 创建指令
ws g d building/create-building building/build-list# 创建插件 [创建插件模板, 选择 CLI 提供的内置插件]
walrus generate plugin
ws g p11. CLI 提供内置自定义指令
创建 CLI 提供的内置自定义指令时会同时在 docs/directives 中生成使用文档。
- 防抖 debounce
- 节流 throttle
- 热键绑定 hotkey
- 拷贝内容 clipboard
- 滚动位置 scrollTo
- 图片懒加载 imageLazy
- 无限滚动加载 infiniteScroll
- 文本超出范围显示省略号 ellipsis
- 监听元素外部的点击事件 clickOutside
- 输入实时验证 inputMask
- 仿 Material Ripple 效果 ripple
- 货币格式化 money
- 滚动锁定 scrollLock
- ...
12. CLI 提供内置插件
创建 CLI 提供的内置自定义指令时会同时在 docs/plugins 中生成使用文档。
- 权限 permission
- ...
13. 帮助
如果需要查看更多命令或帮助信息, 可以使用以下命令:
walrus --help
ws -h这将列出所有可用的命令及其描述。