一、总览

二、解析

1、node_modules

项目的所有依赖包

2、public

可以放一些图片，如网站的图标

3、src

src是项目的主要部分

（1）api定义访问后端的函数，如：

import { request } from '../utils/request'// 用户登录
export function userLogin(params) {return request({method: 'post',url: 'user/login',data: params,headers: {'Authorization': window.localStorage.token,},})
}

（2）assets 文件夹里面主要放置一些资源文件。比如js 、css 之类的文件。

（3）components存放 vue 的公共组件，可以全局复用。

（4）router用来存放路由信息，一般是一个index.js文件。

（5）views用来放主体页面，区别于components，views可在路由中配置。

（6）main.js是项目的入口文件，作用是初始化 vue 实例、引入所需要的插件。

（7）less可以放重定义的css

（8）App.vue是项目的主组件，所有页面都是在该组件下进行切换的。app.vue可以当做是网站首页，也可以写所有页面中共同需要的动画或者样式，不在他上面写代码也可以。只要你在router文件夹中的index.js填写好路由，就是一个普通vue文件，只不过命名为app.vue，类似于函数命名，语义化，让人更加一目了然看到这个是入口vue文件。

（9）utils放一些js，定义一些工具。如发送网络请求：

import axios from 'axios'export function request(config) {// 创建axios的实例const instance = axios.create({// baseURL: 'http://3958b99l28.zicp.vip',// baseURL: 'http://119.3.180.117:9090',baseURL: 'http://localhost:9090',timeout: 100000})// axios.interceptors  全局拦截//请求拦截instance.interceptors.request.use(config => { //拦截请求return config //若拦截到需要原封不动的返回}, err => { })//响应拦截instance.interceptors.response.use(res => {return res.data}, err => {console.log(err);})// 3.发送真正的网络请求return instance(config)}

（10）store包含全局变量，一些get、set方法。如

4、其他

package：配置文件，项目里各种工具是什么版本。

vue.config.js，可以在里面配置端口号，避免8080冲突，如

module.exports = {publicPath: './',devServer: {host: "0.0.0.0",port: "8081", // 代理端口},
}

vue项目目录结构解释相关推荐

Vue项目目录结构介绍（三）
前言本章我们会对一个 Vue 项目的目录结构进行讲解,解释各子目录以及文件的作用,前端的模块化,Vue 单文件组件规范等. 1.基础目录和文件介绍在上一章,我们通过 vue-cli 创建了一个新的 ...
【Vue前端开发学习】第2章，Vue项目目录结构
文章目录前言一.新增router文件夹及其配置方法二.新增store文件夹及其配置方法三.index.html.App.vue.main.js三者之间的联系前言上一章节,通过Pycha ...
Vue项目目录结构介绍讲解
1.Vue单文件组件 node_modules:依赖的node工具包目录 public: 一般用于存放一些静态资源文件,例如图片,视频,音频等资源文件.需要特别注意的是webpack在进行打包的时候, ...
VUE项目目录结构说明
最近做一些Vue后端开发的简单项目,,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两位的博客提供了很大的帮助 ...
vue项目目录结构详解
目录截图: 1. build:构建脚本目录 build.js ---- 生产环境构建脚本 build-server.js ---- 运行本地构建服务器,可以访问构建后的页面 dev-client.js ...
Vue项目目录结构注解附assets与static目录的区别
static与assets的区别: 为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loa ...
vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...
vue php 架构目录,Vue.js 目录结构
Vue.js 目录结构上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse.Atom等) 中打开该目录,结构如下所示: 目录解析目录/文件说明build项目构建(webpack)相 ...
最全的 eclipse web 项目目录结构
本文会尽可能对 java web 项目的目录结构做出最详细的解释,尽量做到浅显易懂. eclipse web 项目目录结构 java web 项目事例 03-springmvc-drien-xgq 是 ...

vue项目目录结构解释