vue 目录名称详解_Vue项目目录结构解析

build：项目构建(webpack)相关代码，因为我已经引入webpack框架，里面实际上就是调用webpack的API来写的。

config：配置开发、生产环境，后台地址，后台接口拦截处理。

node-modules：npm加载的项目依赖模块。

src：这是我们要开发的目录，基本上要做的事情都在这个目录里。

static：静态资源目录。

index.html：首页入口文件。

启动完一个项目之后，相当于启动了一个web服务器，在浏览器中打开项目地址，实际上是访问项目路径，我们会发现不管是图片还是js文件都需要http请求，因为我们访问的是一个服务器，浏览器和服务器之间进行通信就是通过http请求。

在main.js中我们会看到

new Vue({

el: '#app',

router,

store,

components: {App},

template: ''

})

new Vue就是调用Vue这个框架，然后注入一个对象，其中el为挂载点，在main.js中将App.vue这个组件挂载到id为app的节点上。router、store都会注入Vue中，components是注册App组件，template表示使用App这个组件。

handler.js

在router/handler.js中process.env.NODE_ENV === 'development'是在webpack.dev.conf.js中

plugins: [

new webpack.DefinePlugin({

'process.env': require('../config/dev.env')

})

]

上面的代码显示如果是本地启动项目process.env.NODE_ENV === 'development'，如果打包之后上面的代码就会消失。

总结：这个文件主要在路由跳转之前做了很多处理，有跳转第三方应用、过滤某些路由、进行单点登录(保存用户信息、权限)等操作

instance.js

在router/instance.js中let component = resolve => require(['../views/' + conf.component], resolve)这段代码是路由懒加载，当路由被访问的时候才加载对应组件，提高效率。也可以写成let component = () => import ('../views/' + conf.component)

总结：将自己定义的路由文件处理成某种数据格式

backend.js

主要用于处理接口信息，向后台发送请求，然后处理返回数据

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

启动项目

npm run dev会执行package.json中scripts下的dev，然后会执行webpack-dev-server后面是入口文件webpack.dev.conf.js。