使用Vue快速开发单页应用

时间 2019-11-15

标签使用 vue 快速开发单页应用繁體版

原文原文链接

本文所涉及代码全在vue-cnodehtml

单页应用，即在一个页面集成系统中全部功能，整个应用只有一个页面。由于路由的控制在前端，单页面应用在页面切换时比传统页面更快，从而在前端体验更好。前端

将逻辑从后端转移到前端，提高了性能减小了页面加载时间，先后逻辑更扁平。可是当页面复杂度变高时，你会发现，数据处理，UI交互将变得难以维护，因此应运而生，出现了不少MV框架和类库。Vue就是其中之一，我的以为（非喜勿喷）Vue类库相对于其余MV框架上总体的api更为简洁，提供的api很平衡，解决了问题的同时，没有增长复杂度。另外我的以为vue在大型应用，开发中使用vue-loader将组件分红template,style,script结构更为清晰。vue

本文以及后面相应文章，主要是vue相关技术栈来快速的实现单页应用开发。系列文章将以一个实际项目进行讲解，项目的github地址为：node

vue-cnode demowebpack

这是一个以cnodejs.org提供的api来开发的单页，主要使用的modules有vue、vue-router、vuex、vue-resource。为了快速开发，咱们还使用了vue-cli脚手架工具，下文会作介绍。git

vue-cli

自从node的兴起，前端项目中就开始出现各类预处理工具，当咱们开始一个新项目时，咱们都会先编写一些预处理文件，和构建项目目录。github

而vue-cli就是为了作这方面工做的，生成一套提早定义好的构建文件，和相应的文件。web

vue-cli有5个对应的项目结构。咱们使用的是vue-webpack-boilerplate。ajax

 
     $ npm install -g vue-cli 
    
     $ vue init webpack my-project 
    
     $ cd my-project 
    
     $ npm install 
    
     $ npm run dev

执行上面命令后，咱们将生成下面的文件结构，并开一个服务，你能够打开http://localhost:8080看看。vue-router

具体的使用建议看文档。

项目结构

若是你以前就了解vue和vue-router，能够先看这部分。若是你了解vue不了解vue-router,能够先看这篇文章vue-router。若是你连vue都不是很理解我建议，抽5个小时左右把文档教程过一遍。

你能够看到项目根目录下面有一个html，仅有的一个html。

上图的结构是我本身琢磨的，主要是结合vue-router、vuex两使用方法来考虑的。另外对于组件的复用，将一些功能组件和全局组件都放在根部，经过vuex来控制组件属性实现一些功能。

下面我就结构由上至下的介绍。

main.js

main.js 是咱们的入口文件，主要做用是初始化vue实例并使用须要的插件。

 
     import Vue from 'vue' 
    
     import App from './App' 
    
     import VueRouter from 'vue-router' 
    
     import VueResource from 'vue-resource' 
    
     import filter from './filter' 
    
     import store from './vuex/store' 
    
     import { sync } from 'vuex-router-sync' 
    
     import { configRouter } from './config_router' 
    
     import resourceGlobalSet from './resource_set' 
    
     Vue.use(VueResource) 
    
     Vue.use(VueRouter) 
    
     // 初始化自定义过滤器 
    
     Vue.use(filter) 
    
     const router = new VueRouter({ 
    
      history: true, 
    
      saveScrollPosition: true 
    
     }) 
    
     configRouter(router) 
    
     Vue.http.options.emulateJSON = true 
    
     Vue.http.interceptors.push(resourceGlobalSet) // ajax 拦截 
    
     sync(store, router) 
    
     router.start(App, 'app')

就如同上面所示，主要是使用和配置相应插件，并初始化一个vue，上面的初始化在router.start(App, 'app')，是以App.vue为组要组件，并以html中的为挂载替换点。

APP.vue

App.vue是咱们的主组件，全部页面都是在App.vue下进行切换的。其实你也能够理解为全部的路由也是App.vue的子组件。因此我将router标示为App.vue的子组件。

下面是App.vue的template

 
     <template> 
    
      <div id="app"> 
    
      <cn-header></cn-header> 
    
      <sidebar></sidebar> 
    
      <router-view></router-view> 
    
      <tip></tip> 
    
      <loading></loading> 
    
      </div> 
    
     </template>

你能够看到route-view和其它全局功能组件，全局组件在一个层级。

另外因为APP.vue在全部页面都有，咱们将会在APP.vue上面写一些初始化全局方法。

router

router 是具体的业务组件，好比index,login,content等组件都是具体业务相关的。下面就是再和业务相关的组件。

全局组件

全局组件是页面共用的部分，好比header，footer，navbar，你可能在想若是我有一些header是独特的怎么办，这种状况下能够经过路由作判断，渲染不一样的html，若是判断条件不是路由，也能够在vuex写一个store记录组件的state。

功能组件

功能组件是好比dialog,tip等组件，使用来与用户交互的。

一般状况下，功能组件是各个组件都须要的一些组件。在一个页面里若是有两个组件，两个组件都同时引了一个tip组件做为子组件是纯在的。为了不这种状况，咱们将功能组件提到App.vue而后经过vuex进行组件交互，从而就讲一个功能组件变成了全局方法。

自定义插件

vue还能本身写插件。对于一些公用的方法和逻辑，咱们能够提出来写在插件里面。

小节

能够看到，咱们项目总体结构很是清晰。入口加载初始化，主组件挂载路由全局控制，而后全局组件功能组件借助vuex进行数据控制。