Vue项目命名规范指南分享

components/
  UserProfile.vue        ✅ 推荐
  userProfile.vue        ❌ 不推荐（容易与变量混淆）
  user-profile.vue       ✅ 在模板中使用时推荐

import UserProfile from './components/UserProfile.vue'

<template>
  <user-profile :user="user" />
</template>

props: {
  userName: String,
  isActive: Boolean,
  userId: Number
}

<template>
  <UserCard :user-name="name" :is-active="true" />
</template>

{
  path: '/user-profile',
  name: 'UserProfile',
  component: () => import('../views/UserProfile.vue')
}

name: 'UserProfile'

path: '/user/:user_id' // URL 中使用
$route.params.userId    // JS 中自动转为 camelCase

stores/
  userStore.js
  cartStore.js

state: () => ({
  user: null,
  isLoading: false,
  activeTab: 'dashboard'
})

actions: {
  async fetchUser(userId) {},
  updateUser(userData) {}
}

getters: {
  isLoggedIn: (state) => !!state.user,
  fullName: (state) => `${state.firstName} ${state.lastName}`
}

let currentUser = null;
let loadingCount = 0;

function validateForm() {}
function submitData(data) {}

let isActive = false;
let hasPermission = true;

const MAX_RETRY_COUNT = 3;
const USER_ROLES = ['admin', 'editor', 'viewer'];

this.$emit('update:loading', false);

<template>
  <ChildComponent @update:loading="handleLoadingChange" />
</template>

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

<input v-focus />

.user-card {}
.user-card__header {}
.user-card--active {}