vue 文件目录详解

最新推荐文章于 2024-06-20 10:26:21 发布
最新推荐文章于 2024-06-20 10:26:21 发布
阅读量318 收藏
点赞数
分类专栏： vue 文章标签： vue 前端 node.js javascript
原文链接：https://blog.csdn.net/sinat_36194710/article/details/77644463
版权

项目简介

基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。项目包含：

  • 基础库: vue.js、vue-router、vuex、whatwg-fetch
  • 编译/打包工具：webpack、babel、node-sass
  • 单元测试工具：karma、mocha、sinon-chai
  • 本地服务器：express

目录结构


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       ├── 
       
       README
       
       .md                       项目介绍
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       ├── 
       
       index
       
       .html                      入口页面
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       ├── 
       
       build                           构建脚本目录
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       build-server
       
       .js                 运行本地构建服务器，可以访问构建后的页面
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       build
       
       .js                        生产环境构建脚本
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       dev-client
       
       .js                   开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
      
      
    
     
     
  7. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       dev-server
       
       .js                   运行本地开发服务器
      
      
    
     
     
  8. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       utils
       
       .js                        构建相关工具方法
      
      
    
     
     
  9. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       webpack
       
       .base
       
       .conf
       
       .js            
       
       wabpack基础配置
      
      
    
     
     
  10. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       webpack
       
       .dev
       
       .conf
       
       .js             
       
       wabpack开发环境配置
      
      
    
     
     
  11. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   └── 
       
       webpack
       
       .prod
       
       .conf
       
       .js            
       
       wabpack生产环境配置
      
      
    
     
     
  12. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       ├── 
       
       config                          项目配置
      
      
    
     
     
  13. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       dev
       
       .env
       
       .js                      开发环境变量
      
      
    
     
     
  14. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       index
       
       .js                        项目配置文件
      
      
    
     
     
  15. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       prod
       
       .env
       
       .js                     生产环境变量
      
      
    
     
     
  16. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   └── 
       
       test
       
       .env
       
       .js                     测试环境变量
      
      
    
     
     
  17. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       ├── 
       
       mock                            
       
       mock数据目录
      
      
    
     
     
  18. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   └── 
       
       hello
       
       .js
      
      
    
     
     
  19. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       ├── 
       
       package
       
       .json                    
       
       npm包配置文件，里面定义了项目的
       
       npm脚本，依赖包等信息
      
      
    
     
     
  20. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       ├── 
       
       src                             源码目录    
      
      
    
     
     
  21. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       main
       
       .js                         入口
       
       js文件
      
      
    
     
     
  22. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       app
       
       .vue                         根组件
      
      
    
     
     
  23. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       components                      公共组件目录
      
      
    
     
     
  24. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   │   └── 
       
       title
       
       .vue
      
      
    
     
     
  25. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       assets                          资源目录，这里的资源会被
       
       wabpack构建
      
      
    
     
     
  26. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   │   └── 
       
       images
      
      
    
     
     
  27. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   │       └── 
       
       logo
       
       .png
      
      
    
     
     
  28. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       routes                          前端路由
      
      
    
     
     
  29. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   │   └── 
       
       index
       
       .js
      
      
    
     
     
  30. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   ├── 
       
       store                           应用级数据（
       
       state）
      
      
    
     
     
  31. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   │   └── 
       
       index
       
       .js
      
      
    
     
     
  32. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │   └── 
       
       views                           页面目录
      
      
    
     
     
  33. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │       ├── 
       
       hello
       
       .vue
      
      
    
     
     
  34. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       │       └── 
       
       notfound
       
       .vue
      
      
    
     
     
  35. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       ├── 
       
       static                          纯静态资源，不会被
       
       wabpack构建。
      
      
    
     
     
  36. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       └── 
       
       test                            测试文件目录（
       
       unit&
       
       e2e）
      
      
    
     
     
  37. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           └── 
       
       unit                            单元测试
      
      
    
     
     
  38. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
               ├── 
       
       index
       
       .js                        入口脚本
      
      
    
     
     
  39. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
               ├── 
       
       karma
       
       .conf
       
       .js                   
       
       karma配置文件
      
      
    
     
     
  40. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
               └── 
       
       specs                           单测
       
       case目录
      
      
    
     
     
  41. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
                   └── 
       
       Hello
       
       .spec
       
       .js

环境安装

本项目依赖 node.js， 使用前先安装 node.js 和 cnpm（显著提升依赖包的下载速度）。

  1. 自行下载并安装 node.js： https://nodejs.org/en/download/

  2. 然后安装 cnpm 命令：

     npm install -g cnpm --registry=https://registry.npm.taobao.org

快速开始


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       git 
       
       clone https://github.com/hanan198501/vue-spa-template.git 
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       cd 
       
       vue-spa-template
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       cnpm 
       
       install
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       npm 
       
       run dev

命令列表：


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       #开启本地开发服务器，监控项目文件的变化，实时构建并自动刷新浏览器，浏览器访问 http://localhost:8081
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       npm 
       
       run dev
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       #使用生产环境配置构建项目，构建好的文件会输出到 "dist" 目录，
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       npm 
       
       run build
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       
      
      
    
     
     
  7. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       #运行构建服务器，可以查看构建的页面
      
      
    
     
     
  8. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       npm 
       
       run build-server
      
      
    
     
     
  9. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       
      
      
    
     
     
  10. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       #运行单元测试
      
      
    
     
     
  11. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       npm 
       
       run unit

前后端分离

项目基于 spa 方式实现前后端分离，服务器通过 nginx 区分前端页面和后端接口请求，分发到不同服务。前端物理上只有一个入口页面, 路由由前端控制（基于vue-router），根据不同的 url 加载相应数据和组件进行渲染。

接口 mock

前后端分离后，开发前需要和后端同学定义好接口信息（请求地址，参数，返回信息等），前端通过 mock 的方式，即可开始编码，无需等待后端接口 ready。 项目的本地开发服务器是基于 express 搭建的，通过 express 的中间件机制，我们已经在 dev-server 中添加了接口 mock 功能。 开发时，接口的 mock 数据统一放在 mock 目录下，每个文件内如下：


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       module.exports = {
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       // 接口地址
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       api: 
       
       '/api/hello',
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       // 返回数据 参考http://expressjs.com/zh-cn/4x/api.html
      
      
    
     
     
  7. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
      
       
       response: 
       
       function (req, res) {
      
      
    
     
     
  8. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           res.send(
       
       `
      
      
    
     
     
  9. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
             <p>hello vue!</p>
      
      
    
     
     
  10. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           `);
      
      
    
     
     
  11. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
         }
      
      
    
     
     
  12. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       }

模块化

开发时可以使用 ES2015 module 语法，构建时每个文件会编译成 amd 模块。

组件化

整个应用通过 vue 组件的方式搭建起来，通过 vue-router 控制相应组件的展现，组件树结构如下：


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       app
       
       .vue                         根组件（整个应用只有一个）
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           ├──
       
       view1
       
       .vue                    页面级组件，放在 
       
       views 目录里面，有子组件时，可以建立子目录
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           │   ├──
       
       component1
       
       .vue               功能组件，公用的放在 
       
       components 目录，否则放在 
       
       views 子目录
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           │   ├──
       
       component2
       
       .vue
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           │   └──
       
       component3
       
       .vue
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           ├──
       
       view2
       
       .vue
      
      
    
     
     
  7. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           │   ├──
       
       component1
       
       .vue
      
      
    
     
     
  8. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           │   └──
       
       component4
       
       .vue
      
      
    
     
     
  9. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           └──
       
       view3
       
       .vue
      
      
    
     
     
  10. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
               ├──
       
       component5
       
       .vue
      
      
    
     
     
  11. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
               ……

单元测试

可以为每个组件编写单元测试，放在 test/unit/specs 目录下面, 单元测试用例的目录结构建议和测试的文件保持一致（相对于src），每个测试用例文件名以 .spec.js结尾。 执行 npm run unit 时会遍历所有的 spec.js 文件，产出测试报告在 test/unit/coverage 目录。

联调方式

前后端分离后，由于服务端和前端的开发环境处于2台不同的机器上，前端的异步请求需要代理到后端机器中。 联调的时候，只需通过 proxy 参数运行 dev 脚本即可，所有 mock 目录下定义的接口将会转发到 proxy 参数指定的机器：


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       # 172.16.36.90:8083 为后端机器的环境地址
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       npm run dev -- --proxy=
       
       172.16.36.90:8083

这样，如果 mock 目录下有定义了接口 /api/hello ，将会转发到 http://172.16.36.90/:8083/api/hello

全栈猿人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义View系列文章目录
行云间
11-06 831
自定义View系列文章目录
vue 文件目录结构详解
11-26
Vue.js 文件目录结构详解 在基于 Vue.js 的前端开发环境中，构建一个单页应用程序(SPA)通常涉及到多种技术栈和工具。以下是一个典型的 Vue.js 项目目录结构的详细解析： 1. **README.md** - 项目介绍文件，包含了...
Vue目录结构 (三)
吴佩佩佩佩的博客
08-18 479
如果还没有安装过vue，去看Vue安装教程 (一) 如果还没有创建项目，去看Vue创建项目 (二) 1. 目录结构 ├─dist // 执行npm run build构建后的文件，用于生产环境。 │ ├─node_modules // 存放下载安装过的模块，也就是通过npm install安装的都在这里面。 │ ├─public // 存放静态资源，只会被复制，不会通过webpack打包。 │ ├─src // 源码目录，所有代码写这里面 │ │ App.vue // 根组件 │ │ main.
Vue项目的详细目录结构解析
最新发布
weixin_45131680的博客
06-20 697
我们在使用Vuevue-demo├── dist //项目构建后的输出目录├── public├── src├── tests //选装：测试模块├── ...dist—— 项目构建打包后的默认输出目录。查看详情 ->—— 项目依赖文件，其中包括很多基础依赖和自己安装的依赖。查看详情 ->public—— 存放公共资源和项目的主入口文件index.html。查看详情 ->src—— 项目核心文件夹：包括项目源码，各种静态资源等等。是我们开发的重点工作目录。查看详情 ->test。
vue3目录结构详解
LickDog的博客
12-02 580
vue3结构目录详解 本人目前还未开始使用ts 准备后续全面学习 到时候应该会多发点ts和vue3搭配使用的内容
【VUE】相关目录介绍
『程序员·小李』的博客
08-18 514
Page页面 一般vue项目是单页面程序 View视图 一个view对应一个vue文件，一般放在view目录下，一个项目包含多个视图 Component组件 自定义的组件，可以被视图引用 路由route 视图之间的切换称为路由 vue文件结构 views目录下包含多个视图，视图之间可以切换，每个view包含三个部分： template 模板，h...
vue3.x 目录结构详解
云逸的博客
12-15 789
vue3.x 目录结构详解 该文章转自博客园的清和时光;原文地址：vue3.x 目录结构详解 以下是刚创建的vue3.x 项目的目录 我们来解释一下这些目录都是用来干嘛的 |-node_modules -- 所有的项目依赖包都放在这个目录下 |-public -- 公共文件夹 ---|favicon.ico -- 网站的显示图标 ---|index.html -- 入口的html文件 |-src -- 源文件目录，编写
基于Vue单文件组件详解
08-29
基于Vue单文件组件详解 本文将详细介绍Vue单文件组件的概念、优点和使用方法。单文件组件是一种特殊的文件格式，它将组件的模板、逻辑和样式集成到一个文件中，解决了传统组件定义方式中的缺陷。 一、传统组件定义...
详解.vue文件解析的实现
08-27
详解.vue文件解析的实现 本文主要介绍了.vue文件解析的实现，包括了.vue文件的结构、template标签的使用、style标签的作用域、script标签的export default语法等。下面是对这些知识点的详细解释： 1. Vue单文件...
vue项目目录结构详解
qq_20382175的博客
03-21 789
前后端分离后，开发前需要和后端同学定义好接口信息（请求地址，参数，返回信息等），前端通过 mock 的方式，即可开始编码，无需等待后端接口 ready。可以为每个组件编写单元测试，放在 test/unit/specs 目录下面, 单元测试用例的目录结构建议和测试的文件保持一致（相对于src），每个测试用例文件名以 .spec.js结尾。这样，如果 mock 目录下有定义了接口 /api/hello ，将会转发到 ​ ​http://172.16.36.90/:8083/api/hello​。
vue 库文件
weixin_43151921的博客
05-20 367
https://youzan.github.io/vant/#/zh-CN/intro
【Vue学习总结】3. Vue目录结构分析
程序猿之洞
07-05 2792
接上篇《2.Vue环境搭建、运行第一个项目》 上一篇我们主要讲解了Vue的环境的搭建，本篇我们主要来分析项目的目录结构以及Vue的基础语法。 一、Vue项目文件目录详情介绍 下面就是上一篇我们搭建的一个样例工程的完整结构（install后）： 其中包括了node_modules、build、config、src、static以及test文件夹，还有index.html的超文本文件，和package.json以及package-lock.json的json文本文件，还有一个markdown的文本文件。
自定义View系列1：介绍目录和自定义View的分类
bobo_zai的博客
12-18 159
自定义View系列1：介绍目录和自定义View的分类引言1. 简介2.学习目录3.学习目标4.学习计划5.自定义View的分类5.1 完全自定义View5.2 完全自定义View5.3 自定义组合View 引言 这将是一个系列的博客，主要是针对Android 自定义View的学习和工作过程总结。借鉴了一些前人们的优秀文档比如【扔物线】老师HenCoder系列，以及CSDN其他优秀的作者的文档；感...
【04Vue3 目录结构】VUE3目录结构概述结构详解目录结构的作用注意事项
燃正科技
06-08 4512
在 Vue3 项目中，通常采用以下目录结构组织代码： 目录结构详解 ：该目录存放不经过 webpack 构建处理的静态资源文件，例如 HTML 文件、图标等。 ：主要代码存放目录。 ：用于存放项目中使用的静态资源，例如图片、字体等。 ：存放 Vue 组件文件，通常按功能或模块进行组织。 ：存放页面级组件，用于组织多个组件形成完整页面。 ：项目的根组件，包含应用的整体结构和布局。 ：Vue3 的入口文
vue 目录名称详解_vue目录详解
weixin_39673471的博客
12-21 455
1. build文件夹：打包配置的文件夹2. config文件夹：打包的配置，webpack对应的配置3. src文件夹：开发项目的源码4. App.vue ： 入口组件 :项目入口文件，页面级vue组件5. static文件夹：静态资源，图片6. .babelrc：ES6解析的配置7. .gitignore：忽略某个或一组文件git提交的一个配置8. index.html：单页面的入口，通过we...
vue项目结构及文件介绍(2) —— build文件夹
热门推荐
luwenze的博客
04-21 1万+
build文件夹里面是对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等； build.js文件 构建环境下的配置:loading动画、删除创建目标文件夹、webpack编译、输出信息 'use strict' // js的严格模式 require('./check-versions')() // node和npm的版本检查 process.env.NODE_ENV...
VueCli项目目录解析
xnmahahd的博客
03-13 82
vue - vue-cli2脚手架搭建build文件夹详解
qq_39748755的博客
04-21 3482
build.js 构建环境下的配置:   loading动画   删除创建目标文件夹   webpack编译;输出信息 //这是vue-cli脚手架工具的生产环境配置入口 package.json中的"build": "node build/build.js"的直接指向。 // js的严格模式 'use strict' //检查node+npm的...
vue-cli脚手架之build文件夹上半部
hzzyli的博客
11-14 298
build.js作用：命令npm run build的入口配置文件，主要用于生产环境。 build.js中具体含义标注（vue-cli脚手架官方文件解释，大家可自行定制这里面的内容）： check-version.js，文件有点点长这里直接贴代码： // An highlighted block 'use strict' //js严格运行模式 const chalk = require('ch...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值