Web前端-vue 开发命名规范

忘是亡心i 2023-10-03 11:58 42阅读 0赞

#### 1、views 命名 ####

views 文件夹下面是由 以页面为单位的 vue 文件 或者 模块文件夹 组成的

放在 src 目录之下，与 components、assets 同级

![f57d8dd83d5d43bc4c776c56290d5455.png][]

#### 目录解析 ####

<table> 
 <thead> 
  <tr> 
   <th>目录/文件</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>build</td> 
   <td>项目构建(webpack)相关代码</td> 
  </tr> 
  <tr> 
   <td>config</td> 
   <td>配置目录，包括端口号等。我们初学可以使用默认的。</td> 
  </tr> 
  <tr> 
   <td>node_modules</td> 
   <td>npm 加载的项目依赖模块</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td> <p>这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：</p> 
    <ul> 
     <li>assets: 放置一些图片，如logo等。</li> 
     <li>components: 目录里面放了一个组件文件，可以不用。</li> 
     <li>App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。</li> 
     <li>main.js: 项目的核心文件。</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>static</td> 
   <td>静态资源目录，如图片、字体等。</td> 
  </tr> 
  <tr> 
   <td>test</td> 
   <td>初始测试目录，可删除</td> 
  </tr> 
  <tr> 
   <td>.xxxx文件</td> 
   <td>这些是一些配置文件，包括语法配置，git配置等。</td> 
  </tr> 
  <tr> 
   <td>index.html</td> 
   <td>首页入口文件，你可以添加一些 meta 信息或统计代码啥的。</td> 
  </tr> 
  <tr> 
   <td>package.json</td> 
   <td>项目配置文件。</td> 
  </tr> 
  <tr> 
   <td>README.md</td> 
   <td>项目的说明文档，markdown 格式</td> 
  </tr> 
 </tbody> 
</table>

打开 APP.vue 文件，代码如下（解释在注释中）：

**src/APP.vue**

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <hello></hello>
      </div>
    </template>
     
    <script>
    // 导入组件
    import Hello from './components/Hello'
     
    export default {
      name: 'app',
      components: {
        Hello
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

#### 2、views 下的文件夹命名 ####

（1）views 下面的文件夹代表着模块的名字

（2）由名词组成（car、order、cart）

（3）单词只能有一个（good: car order cart）（bad: carInfo carpage）

（4）尽量是名词（good: car）（bad: greet good）

（5）以小写开头（good: car）（bad: Car）

#### 3、views 下的 vue 文件命名 ####

（1）views 下面的 vue 文件代表着页面的名字

（2）放在模块文件夹之下

（3）只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 Login Home

（4）尽量是名词

（5）大写开头，开头的单词就是所属模块名字（CarDetail、CarEdit、CarList）