关于vue.js的使用经验总结

css的作用域使用

页面使用局部css样式，避免全局样式污染

全局组件使用全局css样式，方便调用者样式覆盖

css样式类名

css类名宜采用BEM命名方式

.item{}

.item__name{}

.item__name--active{}

常用的css类名可以单独定义，例如：

.margin-top--10{
	margin-top: 10px;
}

.margin-top--20{
	margin-top: 20px;
}

.cursor--pointer{
	cursor: pointer;
}

/* 空数据 */
.mo-empty {
  color: #909399;
  font-size: 12px;
  line-height: 60px;
  text-align: center;
}

css预处理器

优先使用less，而不是sass/scss

less安装简单，功能虽然没有sass/scss强大，已经够用了，关键是安装简单

第三方库的依赖管理

package.json

{
  "dependencies": {
    "axios": "^0.27.2",
    "dayjs": "^1.11.5",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "less": "^4.1.3",
    "prettier": "^2.7.1",
    "vite": "^3.0.0"
  }
}

推荐锁定版本，这样能避免第三方库不兼容升级导致的bug

{
  "dependencies": {
    "axios": "0.27.2",
    "dayjs": "1.11.5",
    "vue": "3.2.37"
  },
  "devDependencies": {
    "less": "4.1.3",
    "prettier": "2.7.1",
    "vite": "3.0.0"
  }
}

from表单

与服务器接口交换数据，应该增加一个中间层，以便后续的变更：

• 新增字段或减少字段
• 接口数据格式变化

例如：

后端接口只提供了一个名字name 参数，而交互上需要用户分别输入姓氏lastName 和名字firstName, name是一个组合字段，如果直接在form中定义name,则不能满足需求，需要定义两个字段对应两个输入框

在和后端接口交互的时候，分别做一个接收处理 和提交处理，类似中间层的效果

还有一个好处是明确需要接口参数字段，无论后端代码怎么改，只要再出口和入口处理即可

let form = {
	firstName: '',
	lastName: '',
	age: 0
}

1、from表单不应该直接提交，应该做一个提交前数据处理

let params = {
    name: [form.firstName, form.lastName].join('|'),
    age: form.age
}

// submit(form)
submit(params)

2、编辑from表单不应该使用接口返回的数据，应该做一个编辑前数据处理

// let form = getData()
let data = getData()

[form.firstName, form.lastName] = data.name.split('|')
form.age = data.age

参考 Node Sass to Dart Sass