vue模板结构以及项目目录设计

最新推荐文章于 2025-05-21 22:54:12 发布

yehuiyuwei

最新推荐文章于 2025-05-21 22:54:12 发布

阅读量794

点赞数

CC 4.0 BY-SA版权

分类专栏： vue知识

本文链接：https://blog.youkuaiyun.com/yehuiyuwei/article/details/89067878

vue知识专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue项目的标准文件夹及文件组织方式，包括src、components等核心目录的作用，以及webpack、babel等工具的配置文件说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue模板结构

|-- build : webpack 相关的配置文件夹(基本不需要修改)
    |-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
    |-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
    |-- components: vue 组件及其相关资源文件夹
    |-- App.vue: 应用根主组件
    |-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件

项目目录设计

|-- src
    |-- api:与后台交互模块文件夹
    |-- common:通用资源文件夹（font，stylus，img）
    |-- components:非路由组件文件夹
    |-- filters:自定义过滤器模块文件夹
    |-- mock:模拟数据接口文件夹
    |-- pages:路由组件文件夹
    |-- router:路由器文件夹
    |-- store:vuex相关模块文件夹
    |-- App.vue:应用组件
    |-- main.js:入口JS