/vue-cli-init

基于vue-cli3的前端开发环境，开箱即用

Primary LanguageCSS

开始

yarn

yarn dev //

yarn build //

风格指南

单文件组件文件名称

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

// bad
mycomponent.vue
myComponent.vue

// good
my-component.vue
MyComponent.vue //本项目使用的命名规则

本项目使用 驼峰命名

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue

// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue

代码拆分

拆分原则，同一页面内的多个模块，按照功能业务拆分为多个单文件，利于代码维护，方便管理。

禁止单文件内代码臃肿。

CSS 相关

变量命名

命名原则遵循 BFM 命名规则

预处理器

本项目使用 less 作为 CSS 预处理器。

一个 vue 文件中，如无特殊情况，禁止添加多个 <style> 标签。

如需修改组件内样式，使用 /deep/ 进行 CSS 穿透。

全局 CSS 变量

./src/style/var.less中的变量为全局变量，所有 vue 文件中均可使用，无需重复引用

全局样式必须保持统一，单文件中优先使用全局样式变量。

全局 CSS 样式

添加全局样式需在统一的 less 文件或 App.vue 中添加

禁止在单文件中添加全局样式

图标

内置 Font Awosome 5 图标，使用方法 <font-icon icon="chess-knight" />

图标查阅地址

仅可使用 Free + Solid 类目下的图标

自动注册

vue 组件注册

全局组件放置在 ./src/components/baseComponents 中会被自动注册，无需处理，非全局组件请勿放置在此目录中

vuex modules 注册

放置在./src/store/modules中的 modules 会被自动注册，无需处理

Git commits 提交规范

需按照标准规范提交，具体参考Commit message 和 Change log 编写指南.

本项目可以使用 git cz 代替 git commit 命令。

全局工具库/函数

以下工具库可以全局使用，包括任何 js/vue 文件中。

<调用名称>:<引入库>

完整列表请查看 vue.config.js 中的 ProvidePlugin 字段。

如需其他全局库，可在该字段下添加，也可注册在 Vue.prototype 中，视情况而定。

{
    _: "lodash", //等同于 import _ from 'lodash'
    dayjs: "dayjs",
    jsCookie: "js-cookie",
    jsBase64: ["js-base64", "Base64"], // 等同于 import {Base64} from 'js-base64'
    uuid: "uuid/v1",
    xss: "xss"
}

请求

所有请求必须经过 vuex 调用

console.log 相关

生产环境中的console.log会被清除，如需在生产环境中保留，请使用window.console.log