Vue 新手開發項目 以及 基於 Vue cli 項目最佳實踐（二）項目篇

沒建立好項目的同窗，請看上一篇文章

《Vue 新手開發項目 以及 基於 Vue cli 項目最佳實踐（一）基礎篇》

本章將按照本人總結的經驗，將項目文件結構改造，符合多人協做，我的思考

1. assets (靜態文件)

├── css // 樣式文件夾
│ ├── atom.less // 原子類文件：便於微調樣式，例如：.g-ml10 {margin-left: 10px;}
│ ├── global.less // 全局樣式
│ └── reboot.less // 樣式初始化
└── images // 圖片文件夾
複製代碼

1. atom.less

/**
 * 原子類
 * 主要的做用是 便於css樣式的微調
 */

// 上間距
.g-mt10 {
  margin-top: 10px;
}
.g-mt20 {
  margin-top: 20px;
}
.g-mt30 {
  margin-top: 30px;
}
.g-mt40 {
  margin-top: 40px;
}
// 右間距
.g-mr10 {
  margin-right: 10px;
}
.g-mr20 {
  margin-right: 20px;
}
.g-mr30 {
  margin-right: 30px;
}
.g-mr40 {
  margin-right: 40px;
}
// 下間距
.g-mb10 {
  margin-bottom: 10px;
}
.g-mb20 {
  margin-bottom: 20px;
}
.g-mb30 {
  margin-bottom: 30px;
}
.g-mb40 {
  margin-bottom: 40px;
}
// 左間距
.g-ml10 {
  margin-left: 10px;
}
.g-ml20 {
  margin-left: 20px;
}
.g-ml30 {
  margin-left: 30px;
}
.g-ml40 {
  margin-left: 40px;
}

// 上內邊距
.g-pt10 {
  padding-top: 10px;
}
.g-pt20 {
  padding-top: 20px;
}
.g-pt30 {
  padding-top: 30px;
}
.g-pt40 {
  padding-top: 40px;
}
// 下內邊距
.g-pb10 {
  padding-bottom: 10px;
}
.g-pb20 {
  padding-bottom: 20px;
}
.g-pb30 {
  padding-bottom: 30px;
}
.g-pb40 {
  padding-bottom: 40px;
}
// 左內邊距
.g-pl10 {
  padding-left: 10px;
}
.g-pl20 {
  padding-left: 20px;
}
.g-pl30 {
  padding-left: 30px;
}
.g-pl40 {
  padding-left: 40px;
}

// 浮動
.g-fl {
  float: left;
}
.g-fr {
  float: right;
}

//字號
.g-ft12 {
  font-size: 12px;
}
.g-ft13 {
  font-size: 13px;
}
.g-ft14 {
  font-size: 14px;
}
.g-ft15 {
  font-size: 15px;
}
.g-ft16 {
  font-size: 16px;
}
.g-ft18 {
  font-size: 18px;
}
.g-ft22 {
  font-size: 22px;
}
.g-ft24 {
  font-size: 24px;
}
.g-ft28 {
  font-size: 28px;
}

/* 加粗 */
.g-fw {
  font-weight: 700;
}

.g-w100 {
  width: 100px;
}
.g-w340 {
  width: 340px;
}
.g-w400 {
  width: 400px;
}
.g-w500 {
  width: 500px;
}
.g-w600 {
  width: 600px;
}
// 分割線
.g-bottom-line {
  border-bottom: 1px solid #f0f1f2;
}
// 陰影
.g-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
// cursor: point
.g-pointer {
  cursor: pointer;
}

.g-tip {
  color: @tip-color;
  font-size: 12px;
}

.g-text {
  color: @text-color;
  font-size: 14px;
}
複製代碼

2. global.less

// flex佈局
.g-flex-row-start {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.g-flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.g-flex-column-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.g-flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.g-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.g-text-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

// 更改主色調
:global(.ant-form-item-label label) {
  color: @text-color;
}
// 下彈框樣式
:global(.ant-dropdown-menu-item:hover) {
  background: @primary-color;
  color: #fff;
}
// 去掉彈框下邊框
:global(.ant-modal-footer) {
  border: none;
}
.g-table {
  border-left: 1px solid @line-color;
  border-right: 1px solid @line-color;
  border-top: 1px solid @line-color;
}
.g-input-tip {
  font-size: 12px;
  color: @error-color;
  margin: 10px 0 0 0;
}
複製代碼

2. layouts (基礎佈局)

項目中導航欄，頭部，底部等外框放入此處

3. mixin (經常使用的屬性)

多個頁面通用的屬性，以下：

將其提取爲 table.js，統一管理各個頁面再引入，不用重複寫

export default {
  data () {
    return {
      page: 1,
      pageSize: 10,
      tableData: []
    }
  }
}
複製代碼

4. plugins (外部引入插件統一管理)

├── plugins // 樣式文件夾
│ ├── antd-ui.js // ant-design.vue 按需引入
│ ├── icons.js // 圖標按需引入
│ └── moment.js // 時間格式化引入
複製代碼

1. UI組件庫

ant-design-vue

1. 好看
2. 文檔清晰
3. 使用方便，示例清晰
4. bug少，組件使用順滑
5. 性能較好，有單例測試