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

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

1.1 项目目录介绍

 

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

1.2 package.json

 node_modules 是安装 node 后用来存放用包管理工具下载安装的包的文件夹。比如 webpack 等这些工具。1.2 node_modules

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

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: ''
})

1.3.1 App.vue
 

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]。