vue-cli-plugin-cloud-template

基于 Vue-cli 3.x 生成文件模板的插件

特点

项目集成 eslint、vue-eslint、commitlint、element-ui、axios 等，开箱即用，严格编码规范，代码提交规范，Vue开发规范遵循官方要求 详见

• Router （路由）
• Store (状态管理)
• Directives (指令，global 文件夹为全局指令)
• Filters (过滤器，global 文件夹为全局过滤器)
• Mixins (Mixin，global 文件夹为全局Mixin)
• Menus (菜单)
• Plugin (插件)
• Views (login 登录页面、dashboard 默认首页)
• Asset (fonts, icons, images 和 SCSS 文件)
• Utils

Packages

• Vue CLI
• Vuex
• Vue Router
• element-ui
• axios
• lodash
• SCSS
• ESLint
• ESLintVue
• commitlint/cli

使用

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+) 必须安装 @vue/cli 3.x 以上版本 如何安装 Vue CLI

快速安装命令

vue create --preset hua-cloud/cloud-template {项目名称}

已有项目安装

vue add cloud-template

启动开发环境

cd my-project

npm run dev

生成结构

📂src
├── 📂api               // 接口文件夹
│   └── user.js
├── 📂app               // app 组件
│   ├── app.js
│   ├── app.scss
│   └── index.vue
├── 📂asset              // 资源文件夹
│   ├── 📂icons
│   ├── 📂images
│   └── 📂style
├── 📂components         // 资源文件夹
│   ├── 📂global         // 全局公共组件
│   ├── 📂HelloWorld     // 局部组件
│   └── index.js
├── 📂directives         // 指令文件夹
│   ├── 📂global         // 全局公共指令
│   ├── 📂test
│   └── index.js
├── 📂filters            // 过滤器文件夹
│   ├── 📂global         // 全局公共过滤器
│   └── index.js
├── 📂layout             // layout 公共组件骨架
│   └── 📂default
├── 📂menus              // 项目显示的菜单
│   ├── 📂modules        // 按模块划分的菜单
│   └── index.js
├── 📂mixins             // mixin
│   ├── 📂global         // 全局 mixin
│   └── index.js
├── 📂plugins             // mixin
│   ├── ajax.js           // 请求接口封装的方法 this.$ajax.get()
│   ├── element.js        // ElementUI 使用
│   └── request.js        // 基于axios的封装拦截处理
├── 📂router              // 路由
│   ├── 📂modules         // 按模块划分的路由
│   ├── routes.js
│   └── index.js
├── 📂store               // vuex 状态管理
│   ├── 📂modules         // 按模块划分的store
│   ├── getters.js
│   └── index.js
├── 📂utils               // 工具类文件夹
│   └── index.js
├── 📂views               // 页面文件夹
│   ├── 📂dashboard        // 默认首页
│   └── 📂login           // 登录页面
├── main.js               // 主入口
..

git代码提交规范

• feat: 表示新增了一个功能
• fix: 表示修复了一个 bug
• docs: 表示只修改了文档
• style: 表示修改格式、书写错误、空格等不影响代码逻辑的操作
• refactor: 表示修改的代码不是新增功能也不是修改 bug，比如代码重构
• perf: 表示修改了提升性能的代码
• test: 表示修改了测试代码
• build: 表示修改了编译配置文件
• chore: 无 src 或 test 的操作
• revert: 回滚操作