vue项目目录结构详解

目录截图：

1. build：构建脚本目录

• build.js ---- 生产环境构建脚本
• build-server.js ---- 运行本地构建服务器，可以访问构建后的页面
• dev-client.js ---- 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
• dev-server.js ---- 运行本地开发服务器
• check-version.js ---- 检查npm、node.js版本
• utils.js ---- 构建相关工具方法
• vue-loader.conf.js ---- 配置css加载器以及编译css之后自动添加前缀
• webpack.base.conf.js ---- webpack基本配置
• webpack.dev.conf.js ----- webpack开发环境配置
• webpack.prod.conf.js ---- webpack生产环境配置

2. config：项目配置

• dev.env.js ---- 开发环境变量
• index.js ---- 项目配置文件
• prod.env.js ---- 生产环境变量
• test.env.js ---- 测试环境变量

3. node_modules：npm加载项目的依赖模块
4. src：源码目录

• main.js ---- 入口js文件
• app.vue ---- 根组件
• components ---- 公共组件目录
• assets ---- 资源目录，这里的资源会被wabpack构建
• routes ---- 前端路由
• store ---- 应用级数据（state）
• views ---- 页面目录

5. static：静态资源目录。不会被webpack构建
6. package.json：npm包配置文件，定义项目的npm脚本、依赖包等信息
7. README.md：项目的说明文档，markdown格式