vue的项目结构

不知道大家有没这样的情况，面对刚配置好的脚手架，创建的文件不知道该放哪个文件下，导致后面开发一些文件不好找，不利于维护。

接下来我说说我项目中的一些文件：

首先是components组件文件

这里放的是一些小组件，包括共用的一些组件，组件里也可拆分哪个页面下的组件进行分类。

然后是页面，这些需要添加到路由的页面统一放到pages去：

这里的页面也是进行不同页面来分类，这样有利于后期维护。

接下来是请求的数据接口统一管理：

接口以及axios请求函数统一放到api这个文件下进行管理，我们只要在组件或者页面中使用import {getAppCarousel} form ‘../api’即可直接调用，用哪个就调用哪个。

api文件其他的js文件是一些加密的文件，config.js是配置编译环境和线上环境之间的切换，主要是线上跟开发调用不同接口的转换。

还有就是common这个文件，这个文件是放一些js、css共用的，当然一些图片也能放这里。

接下来就是store状态管理文件和router路由管理文件。

整体的项目结构差不多就是这样啦~

vue的项目结构记录的更多相关文章

  1. vue 快速入门 系列 —— Vue(自身) 项目结构

    其他章节请看: vue 快速入门 系列 Vue(自身) 项目结构 前面我们已经陆续研究了 vue 的核心原理:数据侦测.模板和虚拟 DOM,都是偏底层的.本篇将和大家一起来看一下 vue 自身这个项目 ...

  2. 【vue】vue前端项目结构

    [一]项目结构 [二]项目结构释意 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm ...

  3. vue的项目结构

    一. 准备工作 1. 初始化项目    vue init webpack itany    cd itany    cnpm install    cnpm install less less-loa ...

  4. vue 熟悉项目结构 创建第一个自己的组件

    * vue开发环境搭建 * 项目入口文件 ./src/main.js // The Vue build version to load with the `import` command // (ru ...

  5. vue学习记录①（vue-cli脚手架构建项目结构）

    我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win ...

  6. Vue.js系列之项目结构说明

    转:https://www.jb51.net/article/111658.htm 前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli ...

  7. Vue入坑教程（二）——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...

  8. vue框架搭建的详细步骤之项目结构（二）

    上一篇中简单的创建了一个脚手架,这篇简单的讲一下脚手架的项目结构:     (1).build/ 此目录包含开发服务器和生产webpack构建的实际配置.通常,您不需要触摸这些文件,除非您要自定义We ...

  9. 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)

    注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...

随机推荐

  1. C#等同于正则表达式的写法

    不用写正则表达式,用C#自带的方法 用char 自带的函数实现 /// <summary> /// 只能由数字和大小写字母组成 /// </summary> /// <p ...

  2. Swift 对象内存模型探究（一）

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/zIkB9KnAt1YPWGOOwyqY3Q 作者:王 ...

  3. Vue 学习笔记 -- inline-template

    简书 更方便的使用私有子组件 定义一个私有子组件时,如果子组件的template过长会使得代码非常难以阅读 这时可以使用内联模版 但是如果写成这样 为毛用要子组件呢?

  4. 这月薪过万的Java高级学习资料，难得一遇的干货，不下载真可惜了！

    大家有没有想我呢 不管你们想不想我 我挺想你们的 通过昨天我不断的 死气白咧各种说好话 最终 要到了Java学科的Java集合学习资料 里面包含视频+资料+源码 堂兄也有一个愿望 希望你们月薪过万后 ...

  5. 多媒体文件格式（三）：M3U8 格式

    一.M3U8 格式标准介绍 M3U8文件是指UTF-8编码格式的M3U文件.M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播 ...

  6. Python学习笔记【Supervisor】：使用Supervisor监控Tornado进程

    Linux常见应用服务配置模式nginx和supervisor:采用主配置文件+项目配置文件 安装(如果使用pip安装注意看是否需要指定使用python2版本) 第一步:在Linux中使用apt-ge ...

  7. [Swift]LeetCode111. 二叉树的最小深度 | Minimum Depth of Binary Tree

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  8. [Swift]LeetCode287. 寻找重复数 | Find the Duplicate Number

    Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), pro ...

  9. TCP/IP 详解常用术语

    业务需要,最近看TCP/IP 这本书,专业名词太多了,总结一下,给后来着参考,直接使用. 后续会在读书时慢慢添加. ACK:(ACKnowledgment)TCP首部中的确认标志. ARP:地址解析协 ...

  10. asp.net core系列 24 EF模型配置(主键,生成值,最大长度,并发标记)

    一.主键 键用作每个实体实例的主要唯一标识符. 使用关系数据库时,这会映射到主键的概念. 还可以配置不是主键的唯一标识符.按照约定,名为 Id 或 <type name>Id 的属性会配置 ...