目录截图:
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格式

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐