Vue 新手开发项目 以及 基于 Vue cli 项目最佳实践（二）项目篇

没创建好项目的同学，请看上一篇文章

《Vue 新手开发项目 以及 基于 Vue cli 项目最佳实践（一）基础篇》

本章将按照本人总结的经验，将项目文件结构改造，符合多人协作，个人思考

1. assets (静态文件)

image

├── 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 (外部引入插件统一管理)

image

├── plugins // 样式文件夹
│ ├── antd-ui.js // ant-design.vue 按需引入
│ ├── icons.js // 图标按需引入
│ └── moment.js // 时间格式化引入

1. UI组件库

ant-design-vue

1. 好看
2. 文档清晰
3. 使用方便，示例清晰
4. bug少，组件使用顺滑
5. 性能较好，有单例测试