vue项目结构

一，文件结构

除开src文件夹，其他文件夹都是vue-cli自动生成的（从github下载）

1,build

webpack基础配置文件夹

2 config

暴露出来的参数配置（生产/开发环境的公共变量控制以及为了解决跨域而设立的代理服务器————webpack的一个服务器插件），

3 node_modules

npm 安装的第三方依赖文件夹，在文件中引用依赖的时候不需要输入完整路径，直接"文件名"，就ok了。

4 static

静态资源文件夹（我通常放在src文件的）

5 index.html

模版文件

6 src文件夹

1,app.vue

顶层vue对象,顶层路由

2，main.js

js入口文件（webpack入口）

二，打包之后的页面结构

从这张图看，可以看出来，我们写的template没有在这里出现，所以，dom结构是js渲染出来的，这种方式，不利于seo（搜索引擎优化） 。整个页面是在#app容器下的顶层路由（在最外层vue实例的router-view）中渲染其他的组件（webpack通过vue-loader，找到.vue文件，将其转换为js文件（顺带通过其他loader将其依赖的png,css,scss等其他类型文件进行转换））