详解 Vue 目录及配置文件之 node_modules，src，static，test 目录

缺乏、安全感 2023-03-01 09:26 56阅读 0赞

## 1.1 项目目录介绍 ##

![在这里插入图片描述][20200722091436130.png]

<table> 
 <thead> 
  <tr> 
   <th align="left">目录/文件</th> 
   <th align="left">说明</th> 
   <th align="left">详解</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">build</td> 
   <td align="left">项目构建(webpack)相关代码</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107501735" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">config</td> 
   <td align="left">配置目录，包括端口号等</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107512137" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">node_modules</td> 
   <td align="left">npm 加载的项目依赖模块</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107535733" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">src</td> 
   <td align="left">这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：<br> ♞ assets：放置一些图片，如 logo <br> ♞ components：放置一些组件<br> ♞ views：页面(视图)组件<br> ♞ router.js：路由脚本文件<br> ♞ App.vue：项目入口文件<br> ♞ main.js:：项目的核心文件</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107535733" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">static</td> 
   <td align="left">静态资源目录，如图片、字体等</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107535733" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">test</td> 
   <td align="left">初始测试目录，可删除</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107535733" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">.xxxx 文件</td> 
   <td align="left">这些是一些配置文件，包括语法配置，git 配置等</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">index.html</td> 
   <td align="left">首页入口文件</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">package.json</td> 
   <td align="left">项目配置文件</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107589995" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">README.md</td> 
   <td align="left">项目的说明文档，markdown 格式</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

## 1.2 node\_modules ##

node\_modules 是安装 node 后用来存放用包管理工具下载安装的包的文件夹。比如 webpack 等这些工具。  
![在这里插入图片描述][20200723221221181.png]

## 1.3 src ##

`assets`：放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式；  
 `components`：放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作；  
 `views`：放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面；  
 `router`：放置路由设置文件，指定路由对应的组件；  
 `App.vue`：入口组件，views 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；  
 `main.js`：入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等  
![在这里插入图片描述][20200723221602538.png]

### 1.3.1 main.js ###

// 引入 vue
    import Vue from 'vue'
    // 自动寻找名字为 App 的文件，如 app.vue app.js...
    import App from './App'
    // 引入 router
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
      // 绑定
      el: '#app',
      // 路由
      router,
      // 组件
      components: {  App },
      // 将 App 局部组件显示在页面上
      template: '<App/>'
    })

### 1.3.1 App.vue ###

<template>
      <div id="app">
        <img src="./assets/logo.png">
        
        <router-view/>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'App'
    }
    </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>

## 1.4 static ##

src 目录下的 assets 目录和根目录下的 static 目录都是存放静态文件的，但是 assets 里的文件编译过程中会被 webpack 处理理解为模块依赖，只支持相对路径的形式。 assets 放可能会变动的文件；static 里的文件不会被 webpack 解析，会直接被复制到最终的打包(默认是dist/static)下，必须使用绝对路径引用这些文件。static 放不会变动的文件。这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来设置的。任何放在 static/ 中文件需要以绝对路径的形式引用：/static/\[filename\]。如果更改 assetSubDirectory 的值为 assets，那么路径需改为 /assets/\[filename\]。

## 1.5 test ##

测试目录，所有的测试文件都在这里，可以直接删除。  
![在这里插入图片描述][20200723222811494.png]

[20200722091436130.png]: /images/20230209/7fabe893cd074b3f878c083c55c766fd.png
[20200723221221181.png]: /images/20230209/51e9b18765654a8f92b1719a7bfe0190.png
[20200723221602538.png]: /images/20230209/cc2477820252458d82b6a595f8905511.png
[20200723222811494.png]: /images/20230209/223094bf1cc04f4789655d294976d046.png