Vue3 PC端页面开发规范及说明

1. 项目结构

在Vue3项目中，按照以下目录结构组织项目，便于代码管理和维护：

project-name/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/     // 存放图片、字体等静态资源
│   ├── components/ // 公共组件
│   ├── layouts/    // 布局组件
│   ├── pages/      // 页面组件
│   ├── router/     // 路由配置
│   ├── store/      // Vuex状态管理
│   ├── styles/     // 样式文件
│   ├── plugins/    // Vue插件
│   ├── utils/      // 工具类
│   ├── App.vue
│   └── main.js
└── vue.config.js    // Vue CLI配置

2. 代码规范

2.1. 缩进和空格

在Vue3项目中，使用2个空格进行缩进，并在关键词后面保留一个空格。如下：

<template>
  <div class="example">
    <h1 v-if="showTitle">{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true,
      title: '优秀作品分享',
      content: '这里是正文内容'
    }
  }
}
</script>

2.2. 驼峰命名法

在Vue3项目中，使用驼峰命名法命名组件、属性、方法和变量。如下：

<template>
  <div class="exampleComponent">
    <button @click="toggleSomething">{{ buttonName }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonName: '隐藏'
    }
  },
  methods: {
    toggleSomething() {
      // ...do something
    }
  }
}
</script>

2.3. 组件命名

在Vue3项目中，使用单词首字母大写的方式命名组件。如下：

<template>
  <div class="ExampleComponent">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: '这里是内容'
    }
  }
}
</script>

2.4. 注释

在Vue3项目中，为了方便维护，应在适当的位置添加注释，如组件描述、属性、方法和逻辑说明。如下：

<template>
  <div class="ExampleComponent">
    <!-- 这里是组件描述 -->
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  props: {
    title: {
      type: String,
      required: true, // 这里是属性描述
      default: '这里是标题'
    },
    content: {
      type: String,
      default: '这里是内容'
    }
  },
  methods: {
    doSomething() {
      // 这里是方法描述
    }
  },
  created() {
    // 这里是逻辑说明
  }
}
</script>

3. 示例说明

3.1. 组件示例

以下是一个简单的Vue3组件示例，包含组件结构、样式和功能。

<template>
  <div class="ExampleComponent">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <button @click="toggleContent">{{ buttonText }}</button>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  props: {
    title: {
      type: String,
      required: true,
      default: '这里是标题'
    },
    content: {
      type: String,
      default: '这里是内容'
    }
  },
  data() {
    return {
      showContent: false,
      buttonText: '显示内容'
    }
  },
  methods: {
    toggleContent() {
      this.showContent = !this.showContent;
      this.buttonText = this.showContent ? '隐藏内容' : '显示内容';
    }
  }
}
</script>

<style scoped>
.ExampleComponent {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #f7f7f7;
}
.ExampleComponent h1 {
  margin-bottom: 10px;
  font-size: 24px;
  color: #333;
}
.ExampleComponent p {
  margin-bottom: 10px;
  font-size: 16px;
  color: #666;
  display: none;
}
.ExampleComponent p.show {
  display: block;
}
.ExampleComponent button {
  border: none;
  padding: 5px 10px;
  background-color: #3f51b5;
  color: #fff;
  cursor: pointer;
}
.ExampleComponent button:hover {
  background-color: #283593;
}
</style>

3.2. 打包示例

在Vue3项目中，可以使用以下命令打包项目：

npm run build

打包后的文件位于dist/目录下。

3.3. 部署示例

以下是一个简单的Vue3部署示例，假设使用Nginx作为Web服务器。

首先需要在Nginx配置文件中添加以下内容：

server {
    listen 80;
    server_name example.com;
    root /var/www/example;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
        add_header X-Frame-Options "SAMEORIGIN";
    }

    location /api {
        proxy_pass http://127.0.0.1:8080;
    }
}

然后将打包后的文件上传到/var/www/example目录下。

最后启动Nginx即可：

service nginx start