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

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

├── README.md            项目介绍

├── index.html           入口页面

├── build              构建脚本目录

│  ├── build-server.js         运行本地构建服务器,可以访问构建后的页面

│  ├── build.js            生产环境构建脚本

│  ├── dev-client.js          开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新

│  ├── dev-server.js          运行本地开发服务器

│  ├── utils.js            构建相关工具方法

│  ├── webpack.base.conf.js      wabpack基础配置

│  ├── webpack.dev.conf.js       wabpack开发环境配置

│  └── webpack.prod.conf.js      wabpack生产环境配置

├── config             项目配置

│  ├── dev.env.js           开发环境变量

│  ├── index.js            项目配置文件

│  ├── prod.env.js           生产环境变量

│  └── test.env.js           测试环境变量

├── mock              mock数据目录

│  └── hello.js

├── package.json          npm包配置文件,里面定义了项目的npm脚本,依赖包等信息

├── src               源码目录

│  ├── main.js             入口js文件

│  ├── app.vue             根组件

│  ├── components           公共组件目录

│  │  └── title.vue

│  ├── assets             资源目录,这里的资源会被wabpack构建

│  │  └── images

│  │   
└── logo.png

│  ├── routes             前端路由

│  │  └── index.js

│  ├── store              应用级数据(state)

│  │  └── index.js

│  └── views              页面目录

│    ├── hello.vue

│    └── notfound.vue

├── static             纯静态资源,不会被wabpack构建。

└── test              测试文件目录(unit&e2e)

└── unit              单元测试

├── index.js            入口脚本

├── karma.conf.js          karma配置文件

└── specs              单测case目录

└── Hello.spec.js

环境安装

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

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

然后安装
cnpm 命令:

npm install -g cnpm
--registry=https://registry.npm.taobao.org
快速开始
git clone https://github.com/hanan198501/vue-spa-template.git
cd vue-spa-template
cnpm install
npm run dev
命令列表:

开启本地开发服务器,监控项目文件的变化,实时构建并自动刷新浏览器,浏览器访问 http://localhost:8081

npm run dev

使用生产环境配置构建项目,构建好的文件会输出到
"dist" 目录,

npm run build

运行构建服务器,可以查看构建的页面

npm run build-server

运行单元测试

npm run unit

前后端分离

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

接口 mock

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

module.exports = {

// 接口地址

api: '/api/hello',

// 返回数据 参考http://expressjs.com/zh-cn/4x/api.html

response: function (req, res) {

res.send(`

<p>hello vue!</p>

`);

}

}

模块化

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

组件化

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

app.vue 根组件(整个应用只有一个)
├──view1.vue 页面级组件,放在 views 目录里面,有子组件时,可以建立子目录
│ ├──component1.vue 功能组件,公用的放在 components 目录,否则放在 views 子目录
│ ├──component2.vue
│ └──component3.vue
├──view2.vue
│ ├──component1.vue
│ └──component4.vue
└──view3.vue
├──component5.vue
……

单元测试

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

联调方式

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

172.16.36.90:8083 为后端机器的环境地址

npm run dev --
--proxy=172.16.36.90:8083
这样,如果 mock 目录下有定义了接口 /api/hello ,将会转发到 http://172.16.36.90/:8083/api/hello

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

  1. Angular-cli新建项目目录结构详解

    Angular-cli新建项目目录结构详解 在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文 ...

  2. React脚手架创建一个React应用以及项目目录结构详解

    react脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果 react提供了一个专门用于创建react项目的脚手 ...

  3. [转]Angular项目目录结构详解

    本文转自:https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873 版权声明:本文为博主原创文章,转载请注明地址.如果文中有什么纰漏 ...

  4. Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递

    [TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LE ...

  5. [转帖]Tomcat目录结构详解

    Tomcat目录结构详解 https://www.cnblogs.com/veggiegfei/p/8474484.html 之前应该是知道一点 但是没有这么系统 感谢原作者的描述. 1.bin: 该 ...

  6. Linux文件系统的目录结构详解

    Linux文件系统的目录结构详解   一.前 言 文章对Linux下所有目录一一说明,对比较重要的目录加以重点解说,以帮助初学者熟练掌握Linux的目录结构. 二.目 录 1.什么是文件系统 2.文件 ...

  7. vue项目目录结构

    VUE项目目录结构 如上图所示,我们的目录结构就是这样的了. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没 ...

  8. Linux目录结构(目录结构详解是重点)

    1.Linux目录与Windows目录对比 1.Windows目录结构 2.Linux目录结构 深刻理解Linux 树状文件目录是非常重要的,只有记住他们,你才能在命令行中任意切换,想去哪里去哪里 2 ...

  9. Vue Vue项目目录结构梳理

    Vue项目目录结构梳理   by:授客 QQ:1033553122 1.   结构梳理   . ├── build/                      # webpack 配置文件: │   ...

随机推荐

  1. OVS实现VXLAN隔离

    一.实验环境 1.准备3个CentOS7 mini版本的虚拟机,每个主机3个网卡.如图: 图中OVS-1.OVS-2.OVS-3分别为三台CentOS7 mini版虚拟机,分别配备3个虚拟网卡.如图中 ...

  2. 动手写一个简单版的谷歌TPU-指令集

    系列目录 谷歌TPU概述和简化 基本单元-矩阵乘法阵列 基本单元-归一化和池化(待发布) TPU中的指令集 SimpleTPU实例: (计划中) 拓展 TPU的边界(规划中) 重新审视深度神经网络中的 ...

  3. CSS3常用选择器

    一.基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father > Children)兼容性:IE8+.FireFox.Chrome.S ...

  4. Java多线程(2)线程锁

    多线程访问同一个资源进行读写操作,就很容易出一些问题(比如我们常见的读者写者,生产者消费者模型)所以我们会选择对他们设置信号量或者加锁,来限制同一个时刻只有一个线程对某个对象进行操作. 多线程是一个蛮 ...

  5. 常用的方法论-5why

  6. 使用JMH做Benchmark基准测试

    目录 BenchMark介绍 开始前的步骤 例子 代码 报告 注解介绍 @BenchmarkMode @OutputTimeUnit @Iteration @WarmUp @State @Fork @ ...

  7. 01(a)一元函数_多元函数_无约束极值问题的求解

    1. 一元函数的极值问题  (函数光滑) 对于一个一元函数$f(x)$,怎么才能找出它的极值呢? 1.1根据定义:如果存在一点${{x}_{0}}$,在点${{x}_{0}}$的某个领域$U({{x} ...

  8. 《Python 3.5从零开始学》笔记-第8章 面向对象编程

    前几章包括开启python之旅.列表和元组.字符串.字典.条件和循环等语句.函数等基本操作.主要对后面几章比较深入的内容记录笔记. 第8章 面向对象编程 8.3深入类 #!/usr/local/bin ...

  9. 解决thinkphp在开发环境下文件模块找不到的问题

    win10系统下,phpstudy开发环境下小问题描述: 找不到public公共模块. Not Found The requested URL /public/admin/login.html was ...

  10. Oracle数据库---触发器

    SQL> --当我们对empnew执行删除操作之后,它就会出现一个提示信息,提示:这是删除操作!SQL> CREATE TRIGGER first_trigger 2 AFTER DELE ...