文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中src目录的作用是什么

2023-07-04 14:40

关注

本篇内容主要讲解“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 文件夹是咱们应用的核心!

此文件夹关于应用的业务逻辑部分,它有以下类:

这里有个很棒的例子:订单业务模块

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目录的作用是什么”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯