vue+vuex构建单页应用

时间 2019-11-10

标签 vue+vuex vue vuex 构建单页应用繁體版

原文原文链接

基本

构建工具：webpackjavascript
语言：ES6css
分号：行首分号规则（行尾不加分好，[,(,/,+,-开头时在行首加分号）html
配套设施：webpack全家桶，vue全家桶前端

项目结构

api：封装与后端接口交互的操做java
common：放置一些reset.css之类的react
components：组件webpack
entry：项目入口文件index.js,index.css,index.htmlgit
filters：过滤器。注：虽然vue2.0已经基本废弃（只保留了对文本的过滤）了Vue.filter的用法，此目录下的方法仍然可用于官方推荐用来替代过滤器的计算属性的计算中es6
mixins：一些通用类的混入部分。好比全选、多选可抽出通用的list-toggle
mock：本地开发的mock数据
utils：封装的工具，如对上传文件、日期处理等的封装
views：单页应用的视图（视图也是组件，也可放到components中，但我的以为放在这里比较一目了然）
vuex：放置store，actions，mutations，state
fis-conf.js：用于测试环境联调时fis实时将前端资源推送到开发机上

若是有自定义指令，还能够加上directives目录（vue的几个可扩展的地方均可以单独作一个目录）。对于项目目录，也可使用官方提供的另外一个工具vue-cli来生成,它还会自动构建单元测试(unit)和端对端测试(e2e)的目录和简单示例。

基础组件

vue除了双向绑定外的一个最大特色就是提供了强大的组件树系统，组件化也是 web发展的趋势.
每个Vue实例就是一个组件，构造一个组件的也很简单:

var myComponent = Vue.extend({
    template: '',
    ...
})
// 全局注册组件，tag 为 my-component
Vue.component('my-component', MyComponent)

更推荐的作法是写成*.vue形式的单文件组件，搭配vue-loader使用（下图来自官方文档）。

更多关于组件的内容，见官方文档组件。
另外，在使用单文件组件时，样式会被打包到js中并在运行时会以<style>节点的形式插入到<head>里面。此时若是想将组件的样式打包到输出的css文件中，只须要在webpack.config.js的module.exports中加上如下配置便可：

vue: {
    loaders: {
        js: 'babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false',
        css:ExtractTextPlugin.extract(['css-loader'])
    }
}

刚开始一个项目时，若是在有本身特定的UI设计风格，可能须要单独封装一些textinput,checkbox,radio等基础组件；若是没有的话（如普通的后台管理系统），也可使用Google Material Design，已经有对应的实现material-design-lite。而且vue社区中也已经有针对它的vue组件封装vue-mdl。

应用骨架

以“xx管理后台”为例，首先分为上（导航）下（主体内容）两部分，基本结构为：

接下来在views里面心间user.vue，做为用户管理模块入口，若是每一个模块还须要包含二级导航（一般是在页面左侧部分），user.vue能够像这样：

这两个文件中用到的router-view，都是vue官方路由插件vue-router提供的。
而后是配置单页应用的路由：

在对应的视图组件中，经过route选项的钩子函数，来肯定时图在出现和消失的过程当中须要执行的行为。更多路由相关，见官方文档。

这样，一个基本的：上->［左｜右］的单页应用骨架就有了。（其余类型的应用也可依此类推）

应用状态管理

应用组件化以后，就须要解决组件之间的通讯问题。针对组件之间的通讯问题，vue提供了三种方式： props属性传递，直接经过引用调用组件方法，自定义事件通讯，经过v-ref（在vue2.0已简化为ref）来创建子组件索引从而调用子组件方法。

porps：基于属性传递，vue提供了单次绑定、单向绑定和双向绑定。（虽然双向绑定在vue2.0 中已经废弃）
经过引用：子组件能够用this.$parent访问它的父组件。根实例的后代能够用this.$root访问它。父组件有一个数组this.$children，包含它全部的子元素。
经过自定义事件通讯：每一个Vue实例都是一个事件触发器：
- 使用$on()监听事件
- 使用$emit()在它上面触发事件
- 使用$dispatch()派发事件，事件沿着父链冒泡（vue2.0已废弃）
- 使用$broadcast()广播事件，事件向下传导给全部的后代（vue2.0已废弃）
  在vue2.0中，能够单独使用一个Vue实例来来担任eventBus的做用。

除了这几种方式，当应用比较复杂时，官方推荐使用另外一个官方插件vuex

相似于react的redux，vue的vuex的store也包含一个全局的状态树state；修改state的行为mutations（对应redux的actions）；执行修改的动做actions（对应redux的createAction）。

以全局alert组件的状态为例：

建立state

export default {
    alert: {
        show: false,
        type: 'alert',
        message: '',
        onSure: null,
        onClose: null
    }
}

建立mutations

export default {
    SHOW_ALERT (state, data) {
        data.show = true
        state.alert = data
    },
    HIDE_ALERT (state) {
        state.alert.show = false
    }
}

建立actions

/*主页面涉及到的actions*/
let noop = () => {}
/*显示浮层alert*/
export const showAlert = ({dispatch}, message = '') => {
    if(!message) {
        return false
    }
    dispatch('SHOW_ALERT', {
        type: 'alert',
        message: message,
        onClose: noop
    })
}
/*显示浮层confirm*/
export const showConfirm = ({dispatch}, data = {}) => {
    if(!data.message) {
        return false
    }
    data.type = 'confirm'
    if(typeof data.onClose != 'function') {
        data.onClose = noop
    }
    if(typeof data.onConfirm != 'function') {
        data.onConfirm = noop
    }
    dispatch('SHOW_ALERT', data)
}
/*隐藏浮层*/
export const hideAlert = ({dispatch}) => dispatch('HIDE_ALERT')

构建store

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
import state from "./state"
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
Vue.config.debug = debug
export default new Vuex.Store({
    state,
    mutations,
    actions,
    strict: debug
})

而后在应用的根组件中，经过如下方式获取vuex的功能：

/*引入vuex*/
import store from "../vuex/store"
let App = Vue.extend({
    store,
    components: {
        'admin-header': adminHeader,
        'alert': alert
    }
})

而后再在自组件中的vuex模块经过如下方式获取状态以及触发状态改变的动做：

应用的数据交互

api层

记得以前看过民工叔叔（徐飞）的某篇文章里说的，数据层可以跟UI层分离，这样即便UI底层库更换了，也可使用数据层。同理若是想要对api交互进行替换（如想把某些ajax库换成浏览器支持的fetch api），也能够直接在这一层进行更改。

mock数据

在开发阶段，有时须要mock一些数据来测试应用。推荐一个对restful api友好的第三方工具json-server。

index.js

var users = require('./database/users')
module.exports = function() {
    return {
        "users": users
    }
}

database/users.js

module.exports = {
    "users": [
        {
            "user_id": "233", 
            "user_name": "哈哈哈", 
        }, 
        {
            "user_id": "233", 
            "user_name": "哈哈哈", 
        }
    ], 
    "more": true, 
    "result": "SUCCESS"
}

而后终端执行json-server mock/index.js －port 9999就开启了一个restful的服务了。（也能够把这句写到npm script中）

接下来还差一步，就是须要用到webpack-dev-server的proxy配置：

这样，全部访问/rest/*的接口都会被代理到json-server的服务上.

应用测试

一个完整的应用应该还具有单元测试、端对端测试等。目前比较成熟的测试框架社区中也有很多，但因为还没油深刻研究过，此处不展开。

总结

文章主要是从搭建一款单页应用的总体架构上来进行描述，可能有一些地方不是那么详细，之后有时间在针对单独某些模块再详细描述吧。。
顺便安利一发开源的两个vue组件，欢迎拍砖: