Vue中src目录的作用是什么

本篇内容主要讲解“Vue中src目录的作用是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue中src目录的作用是什么”吧!

Vue CLI

认知一个项目从认识目录开始！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

让咱们来一一揭晓为什么要设置这样的目录结构！

Assets

静态文件目录：包含字体、图标、图片、样式等静态资源，不做赘述。

Common

公共文件夹：通常来说，它又能被拆分成多个子目录：components、mixins、directives，又或者是单个的文件：functions.ts、helpers.ts、constants.ts、config.ts，亦或者其它。但它们有共同的特点：Common 文件夹下的文件都是在多出被引用的。

举例：在 src/common/components 文件夹下，你可以设置 Button.vue 在全局共享的组件；在 helpers.ts 文件中写公共方法以供多处调用。

Layouts

你可以在 Layouts 文件夹下放整个应用的布局文件。比如 AppLayout.vue.

Middlewares

“中间件”这个文件夹有点类似 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

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

Plugins 文件夹当然是用来放 plugin。在 Vue2 中，我们这样调用

import MyPlugin from './myPlugin.ts'  Vue.use(MyPlugin, { someOption: true })

在 Vue3 中，我们也可以在 main.ts 中调用

Services

Services 文件夹是放请求库和 API 的地方，也包括对 localStorage 的管理等。

Static

通常来说，我们不需要 Static 这个文件夹，但也可以放一些 dummy data （虚拟数据）。

Router

Router 文件夹放置你的路由文件，太过常见、无需赘述。你也可以根据需要只在根目录设置 router.ts。但是更推荐你将路由进行一个划分以便阅读和扩展。

Store

Store 文件夹放置你的 Vuex 相关文件。在这个目录下主要是一些全局的持久数据及方法：state 、 actions 、 mutations 、 getters，同时也和 modules 文件夹下的 Vuex 进行关联。

Views

Views 文件夹是我们应用中第二重要的文件夹了。我们都知道它包含的也是业务组件。但其实它更应该是路由的一种映射，比如 /home /about /orders 这个路由，在 Views 文件夹下就应该有 Home.vue、 About.vue 、Orders.vue 这三个文件！

你一定会问为什么要拆分业务部分为 Views 和 Modules 这两个目录，而不是像 Vue CLI 那样放在一起？

有以下优点：

•  更清晰的目录结构

•  更快速的了解路由

•  更直观看到根文件、根页面、以及它们与子组件、子业务是如何关联的。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

到此，相信大家对“Vue中src目录的作用是什么”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！