ShortSemester2023/summer_frontend

VueMIT

说明

1 已安装插件

router，配置在/src/router/index.js中
vuex，配置在/src/store/index.js中

使用 vuex 时，必须把复杂的判断逻辑写在actions中，仅在mutations中处理数据。

访问 vuex 时，应使用 mapState mapAction mapMutation。
axios，配置于vm身上的$http，使用时写this.$http.get等

to 后端

main.js和vite.config.js中有服务器相关设置，按需修改。
mitt，配置于vm身上的$bus，发送事件写this.$bus.emit，接收事件写this.$bus.on
vue-cookies，配置于vm身上的$cookies

2 重置样式

/src/assets/reset.css已经清除了绝大多数元素的默认样式，如各级h标题的粗细和大小、a标签的颜色和下划线、ul li的小圆点等。

该文件引入于/index.html。

3 规范

js 脚本不写分号。css 的每一个样式表中，最后一个key: value后写分号。

数组或对象的最后一个成员后不写逗号，例如

let arr = [
    {
        name: 'Tom',
        age: 18 // <- 这里不要有逗号
    },
    {
        name: 'Jane',
        age: 20 // <- 这里不要有逗号
    } // <- 这里不要有逗号
]

views和components中的.vue文件，按照template script style的顺序写（vscode 快捷键：<v + 回车），style 标签必须写 scoped。
设置 vscode 默认缩进 2 空格。
vue 语法支持的函数调用，不传参数时不写括号，例如，应写@click="handleClick"而非@click="handleClick()"

标签中既有原生属性、又有 vue 语法时，原生放前面

<!-- 这么写 -->
<div class="card-item" v-for="item in items" :key="item.id"></div>

<!-- 而不是这么写 -->
<div v-for="item in items" :key="item.id" class="card-item"></div>

标签有一坨属性时，分行写，标签的左尖括号和标签名独占一行，右尖括号独占一行，例如

<div
  class="card-item" style="padding-left: 10px"
  v-for="item in items" :key="item.id"
  @click="alertMessage(item.msg)"
  @mouseover="handleHover" @mouseleave="handleUnhover"
>
  内容
</div>

组件脚本采用 vue2 写法，不使用 vue3 的setup函数。