189 8069 5689
今天小编给大家分享一下Vue项目的src目录作用是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
平安网站建设公司创新互联公司,平安网站设计制作，有大型网站制作公司丰富经验。已为平安成百上千提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的平安做网站的公司定做！
认知一个项目从认识目录开始！Vue 项目那逃不过认知最通用的 Vue CLI 目录结构。
如下（已显示全部可选项）：
--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 --jest.config.js --package.json --package-lock.json --README.md --tsconfig.json
Vue CLI 目录是非常标准的 Vue 项目结构，但是它并不适用于中型或大型应用。
原因是：我们应该花更多的精力去关注 src 文件夹！具体往下看。
闲言少叙，改造后的目录结构：
src --assets --common --layouts --middlewares --modules --plugins --router --services --static --store --views
让咱们来一一揭晓为什么要设置这样的目录结构！
静态文件目录：包含字体、图标、图片、样式等静态资源，不做赘述。
公共文件夹：通常来说，它又能被拆分成多个子目录：components、mixins、directives，又或者是单个的文件：functions.ts、helpers.ts、constants.ts、config.ts，亦或者其它。但它们有共同的特点：Common 文件夹下的文件都是在多出被引用的。
举例：在 src/common/components 文件夹下，你可以设置 Button.vue 在全局共享的组件；在 helpers.ts 文件中写公共方法以供多处调用。
你可以在 Layouts 文件夹下放整个应用的布局文件。
“中间件”这个文件夹有点类似 vue router，你可以在之下放置你的关于路由跳转判断文件。这里有个简单的例子：
export default function checkAuth(next, isAuthenticated) { if (isAuthenticated) { next('/') } else { next('/login'); } }在 vue-router 中这样使用
import Router from 'vue-router' import checkAuth from '../middlewares/checkAuth.js' const isAuthenticated = true const router = new Router({ routes: [], mode: 'history' }) router.beforeEach((to, from, next) => { checkAuth(next, isAuthenticated) });Modules 文件夹是咱们应用的核心！
此文件夹关于应用的业务逻辑部分，它有以下类：
业务组件 components
测试单元 **tests**
数据持久 store
其它本业务相关的文件
这里有个很棒的例子：订单业务模块
src --modules ----orders ------__tests__ ------components --------OrdersList.vue --------OrderDetails.vue ------store --------actions.ts --------getters.ts --------mutations.ts --------state.ts ------helpers.ts ------types.ts
包括：测试文件、组件（订单列表、订单详情）、Vuex 数据、相关文件。
它又像是一个小的 src 目录~
Plugins 文件夹当然是用来放 plugin。在 Vue2 中，我们这样调用
import MyPlugin from './myPlugin.ts' Vue.use(MyPlugin, { someOption: true })Services 文件夹是放请求库和 API 的地方，也包括对 localStorage 的管理等。
通常来说，我们不需要 Static 这个文件夹，但也可以放一些 dummy data （虚拟数据）。
Router 文件夹放置你的路由文件，太过常见、无需赘述。你也可以根据需要只在根目录设置 router.ts。
Store 文件夹放置你的 Vuex 相关文件。在这个目录下主要是一些全局的持久数据及方法：state 、 actions 、 mutations 、 getters，同时也和 modules 文件夹下的 Vuex 进行关联。
Views 文件夹是我们应用中第二重要的文件夹了。我们都知道它包含的也是业务组件。但其实它更应该是路由的一种映射，比如 /home /about /orders 这个路由，在 Views 文件夹下就应该有 Home.vue、 About.vue 、Orders.vue 这三个文件！
你一定会问为什么要拆分业务部分为 Views 和 Modules 这两个目录，而不是像 Vue CLI 那样放在一起？
有以下优点：
更清晰的目录结构
更快速的了解路由
更直观看到根文件、根页面、以及它们与子组件、子业务是如何关联的。
以上就是“Vue项目的src目录作用是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。