Vue项目的目录不就是VueCLI吗？让这个瓜带你去康康作者能想出什么花吗？本文取其精华，译之。VueCLI识别项目从识别目录开始！Vue项目无法逃避最常见的VueCLI目录结构。如下（显示所有选项）：--public----img------icons----favicon.ico----index.html----robots.txt--src----assets------logo.png----components------HelloWorld.vue-----router------index.ts-----store------index.ts----views-----About.vue-----Home.vue----App.vue----main.ts----registerServiceWorkers.ts----shims-vue.d.ts--tests--e2e----unit--.browserslistrc--.eslintrc.js--.gitignore--babel.config.js--cypress.json--笑话.config.js--package.json--package-lock.json--README.md--tsconfig.jsonVueCLI目录是非常标准的Vue项目结构，但它不适合中型或大型应用程序。原因：我们应该多注意src文件夹！详情见下文。新的src目录闲话少说，修改目录结构：src--assets--common--layouts--middlewares--modules--plugins--router--services--static--store--viewsLetusLet's一一揭秘为什么要建立这样的目录结构！Assets静态文件目录：包含字体、图标、图片、样式等静态资源，不做详细说明。Commonpublic文件夹：一般来说，可以拆分成多个子目录：components、mixins、directives，或者单个文件：functions.ts、helpers.ts、constants.ts、config.ts等。但是它们有一个共同的特点：Common文件夹下的文件都是被引用的。示例：在src/common/components文件夹下，可以将Button.vue设置为全局共享组件；在helpers.ts文件中编写公共方法以供多次调用。Layouts你可以把整个应用的布局文件放在Layouts文件夹下。例如，AppLayout.vue。更多关于布局的问题可以看这篇文章-Vuetricks:smartlayoutsforVueJShttps://itnext.io/vue-tricks-smart-layouts-for-vuejs-5c61a472b69bMiddlewares"middleware"这个文件夹有点类似vuerouter，你可以把你关于路由跳转的判断文件放在它下面。这是一个简单的例子：../middlewares/checkAuth.js'constisAuthenticated=trueconstrouter=newRouter({routes:[],mode:'history'})router.beforeEach((to,from,next)=>{checkAuth(next,isAuthenticated)});本示例用于权限验证。有关中间件的更多讨论，在这篇文章-Vuetricks:smartrouterforVueJShttps://itnext.io/vue-tricks-smart-router-for-vuejs-93c287f46b50ModulesModules文件夹是我们应用程序的核心！这个文件夹是关于应用程序的业务逻辑部分，它有以下类：---orders-------__tests__--------components--------OrdersList.vue--------OrderDetails.vue-----store--------actions.ts--------getters.ts--------mutations.ts--------state.ts------helpers.ts------types.ts包括：测试文件、组件（订单列表、订单详情）、Vuex数据、相关文件。也像是一个小小的src目录~PluginsPlugins文件夹当然是用来放插件的。在Vue2中，我们调用importMyPluginfrom'./myPlugin.ts'Vue.use(MyPlugin,{someOption:true})在Vue3中，我们也可以在main.ts中调用，见v3-using-a-pluginhttps://v3.vuejs.org/guide/plugins.html#using-a-pluginServicesServices文件夹是放请求库和API的地方，也包括localStorage等的管理Static一般来说我们不需要Static文件夹，但我们也可以放一些虚拟数据（dummydata）。Routerrouter文件夹保存着你的路由器文件，太常见了，不赘述。如果需要，您也可以仅在根目录中设置router.ts。但更建议大家划分阅读和拓展的路线。vue-tricks-smart-routerhttps://itnext.io/vue-tricks-smart-router-for-vuejs-93c287f46b50StoreStore文件夹存放你的Vuex相关文件。这个目录下有一些全局持久化的数据和方法：state,actions,mutations,getters，也和modules文件夹下的Vuex相关。ViewsViews文件夹是我们应用程序中第二重要的文件夹。我们都知道它还包含业务组件。但其实应该是路由的映射。比如路由/home/about/orders应该在Views文件夹下有三个文件：Home.vue,About.vue,Orders.vue！你肯定会问为什么要把业务部分拆分成Views和Modules两个目录，而不是像VueCLI那样把它们放在一起？它有以下优点：更清晰的目录结构，更快理解路由，更直观地查看根文件、根页面，以及它们如何与子组件和子业务相关联。总结笔者从工作中思考Vue项目目录结构，然后给出建议。它不需要我们完全应用它们。我们可以学习他们的想法并根据需要使用它们。我想：在实际项目中，VueCLI项目确实会造成一个巨大的Views目录，所以Views转化为Views和Modules目录。前者是核心页面（指路由），后者是具体的子业务及相关。这样的建议确实是个好主意~其实又回到了问题上：如果对业务足够了解，需求不经常变化，目录结构应该是清晰的。但是没办法，再好的产品也免不了来回改。所以只能定期整理和优化。认识目录的过程也是熟悉业务的过程。
