vue前端项目架构/结构

一、划分项目结构一些基本的原则：

• 文件夹和文件夹内部文件的语义一致性

相关的文件放在一起

• 单一入口/出口

无论你的模块文件夹内部有多乱，外部引用的时候，都是从一个入口文件引入，这样就很好的实现了隔离，如果后续有重构需求就知道发现这种方式的优点

• 公共的文件应该以绝对路径的方式从根目录引用
• 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用

公共指的是多个路由模块共用，如一些公共的组件，我们可以放在src/components下

• /src 外的文件不应该被引入

方便划分项目代码文件和配置文件

二、目录结构

单页面目录结构

project
│  .browserslistrc
│  .env.production
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│  yarn-error.log
│  yarn.lock
│
├─public
│      favicon.ico
│      index.html
│
|-- src
    |-- components
        |-- input
            |-- index.js
            |-- index.module.scss
    |-- pages
        |-- seller
            |-- components
                |-- input