vue项目文件目录介绍

从一个vue的小样开始，简单介绍一下vue项目的文件目录

首先，对于目录层的讲解：

1. 对于① .babelrc文件，babel为了解决浏览器的兼容性的问题，它可以让我们放心地使用大部分JS地新标准方法，然后编译成绝大多数地主流浏览器的代码。在项目工程脚手架中，一般会使用 .babelrc文件，通过配置一些参数配合webpack进行打包压缩。
2. 对于② index.html ，组件是个单独封装的东西，如果要设计一个封装好的html组件，必然应该是 < MyComponent ></ MyComponent >这样的形式，每个组件必须是套在一个html标签中的，每个组件的根节点。

项目加载的过程是index.tml->main.js->app.vue->index.js->单页面（XXX.vue）

对于config文件，这个是配置文件

• dev.env.js ：

'use strict' 
//引入一个 webpack-merge 模块
const merge = require('webpack-merge')
//引入刚才打开的 prod.env.js
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

有点类似于es6中的object.assign() ;

• index.js
  可以在里面配置接口、域名等等

• prod.env.js

 module.exports = {
        // 作用很明显，就是导出一个对象，NODE_ENV是一个环境变量，指定production环境
        NODE_ENV: '"production"'
    }

参考网址：https://segmentfault.com/a/1190000010659925

对于src文件夹，这个是我们平常操作最多的文件，其实src里面的文件的本质是一样的，如果写得比较规范的话就能从名字中知道相应的功能。

• App.vue是我们的主组件，所有的页面都是在App.vue下进行切换的，当文路由根据文件路径进行匹配到组件时，将渲染到<router-view / >标签所在的位置；

• main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。在main.js中引入的模块属于全局的模块。
  

• ① assets文件夹主要放一些静态的图片，或者是自定义图标的使用。

• ② components文件下，放主要的页面和功能，例如其中的HelloWorld.vue可以作为特定功能的组件,App.vue这样的组件可以作为固定的内容,比如页面导航栏之类的。
  

• 第一个router 是路由配置文件

• 第二个是写组件样式的文件

• 第三个是我们一般自己写组件的文件夹