Vue结合其生态系统搭建单页应用

由于公司需要开发一套售票系统，但是需求尚在整理中，我作为前端参与进该项目。项目前端框架定位Vue，于是就抽这两天把Vue和其生态系统部分文档看了一遍，做了一个案列分享于此。比较基础，如果经验深的朋友可以跳过---有需要改进的地方，望不吝赐教。

首先该框架所用到的工具和核心插件

Vue 渐进式框架
Vue 脚手架 vue-cli
Vuex 状态管理模式
Vue-Router 路由管理器
Element-ui 桌面端组件库

关于这5个js库具体概念，可以参考Vue官网和周边生态系统

在开始之前，先安装nodejs，使用npm安装上面的js库

安装环境

npm install --save-dev vue

npm install -g @vue/cli

npm install --save-dev vuex

npm install --save-dev vue-router

npm install --save-dev element-ui

创建项目

vue create [projectName](VueSimpleFrame) （或者vue ui）回车后选项默认就行(如果需要特殊配置，可以看插件和preset)

cd VueSimpleFrame & npm run serve

测试运行，到这里由Vue-cli创建的项目结构就完成了。

接下来对项目进行分析然后拓展。

首先观察main.js,项目的入口文件，通过渲染函数&JSX来创建dom。

其次app.vue可以当成layout页面。通过该页面将componets中的组件挂载到组件选项中。

如果按照目前的结构，其实就实现了一个单页应用程序。我们只需要在app.vue做好结构布局，然后根据操作通过动态组件加载模块就可以实现一个系统的编写了。

为何需要其他库的支持

当我的页面过多，组件也随之增加，而动态组件是缓存状态的。如果组件过多，缓存就会过大。

当设计到公共状态管理的时候，公共状态数据需要提取出来进行管理。

使用element-ui，一般来说开发应用项目的公司不会发时间给你去写UI组件，这回造成大量的成本开销。

步骤

在main.js中引入element-ui和vue.use
- import ElementUI from 'element-ui'
- Vue.use(ElementUI);

引入router和router实列并且vue.use 在根实列注入router实列

import { vueRouter, router } from './routers'

routers.js和routeConfig.js & vue.use(vueRouter)

//router.js
import vueRouter from 'vue-router'
import routes from './routeConfig'
var router = new vueRouter({
	routes: routes
})

//路由守卫
router.beforeEach((to, from, next) => {
        /**逻辑处理*/
	next();
})

export {
	vueRouter,
	router
}


//routeConfig.js

// import Home from './Home.vue'
export default [
{
	path: '/:userid',
	// component: Home,
	component: () => import(/**webpackChunkName:Home */'./Home'),//推荐使用动态导入
	alias: '/m/:userid',
	// redirect: '/hello/1/name/kk',
	props: true,
	children: [{
		path: 'well',
		components: {
			default: Well,
			a: A,
			b: B
		},
		props: {
			default: true,
			a: false,
			b: false
		}
	}]
}]

在main.js中vue实列中注入store

Store和type

/**Store.js*/
import Vue from 'vue'
import Vuex from 'vuex'
import {
    INCREMENT,
    DECREMENT,
    PAYLOAD,
    SETUSERINFO
} from './mutation-type'
Vue.use(Vuex)

//子模块
const moduleA = {
    state: {
        mCpi: 'NJKOL009'
    },
    getters: {
        mCpiName: (state, getters, rootState) => {
            return state.mCpi + " Jack " + getters.mCpiLastName + "  " + rootState.count
        },
        mCpiLastName: state => {
            return state.mCpi + "----"
        }
    },
    mutations: {
        setmCpi: (state, cls) => {
            state.mCpi = state.mCpi + cls.Name
        }
    },
    actions: {
        async setmCpiAsync({ dispatch, commit, rootState }, cls) {
            console.log(rootState);

            try {
                await dispatch('getmCpiAsync', cls);
            } catch (error) {
                console.log(error);

            }

            commit('setmCpi', cls)
        },
        getmCpiAsync({ commit }, cls) {
            return new Promise((resolve, reject) => {
                if (cls.Name === 'Mozi') {
                    commit('setmCpi', cls);
                    resolve(cls);
                } else {
                    reject('i dont konw who is him');
                }
            })
        }
    }
}


//getter/mutations/actions 可以提取到单独的JS进行编写管理
const store = new Vuex.Store({
    state: {
        count: 0,
        todos: [
            { id: 1, text: 'China', done: true },
            { id: 2, text: 'As', done: false },
            { id: 3, text: 'Japan', done: true },
            { id: 4, text: 'England', done: false },
            { id: 5, text: 'Island', done: true },
            { id: 6, text: 'Piz', done: false },
        ],
        user: null
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        doneTodosCount: (state, getters) => {
            return getters.doneTodos.length
        },
        getTodoById: (state, getters) => (id) => {
            return getters.doneTodos.find(todo => todo.id === id)
        }
    },
    mutations: {
        [INCREMENT](state) {
            state.count++
        },
        [PAYLOAD]: (state, payload) => {
            state.count = state.count + payload.num
        },
        [DECREMENT]: state => state.count--,
        [SETUSERINFO]: (state, user) => {
            state.user = user.user
        }
    },
    actions: {
        async [INCREMENT]({ dispatch, commit }, payload) {
            try {
                await dispatch(PAYLOAD, payload);
            } catch (error) {
                console.log(error);

            }


            commit(INCREMENT);
        },
        [PAYLOAD]({ commit }, payload) {

            return new Promise((resolve, reject) => {
                if (payload.num > 0) {
                    setTimeout(() => {
                        commit(PAYLOAD, payload);
                        resolve(payload);
                    }, 2000);
                }
                else {
                    reject('its too small')
                }
            })
        }
    },
    modules:
    {
        a: moduleA
    }
})

export default store



//mutation-type.js
const INCREMENT = 'increment';
const DECREMENT = 'decrement';
const PAYLOAD = 'incrementPayload';
const SETUSERINFO = 'setUserInfo';

export {
    INCREMENT,
    DECREMENT,
    PAYLOAD,
    SETUSERINFO
}

main.js

import Vue from 'vue'
import { vueRouter, router } from './routers'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
import store from './store/Store'


Vue.config.productionTip = false


Vue.use(ElementUI);
Vue.use(vueRouter);

new Vue({
	router,
	store,
	render: h => h(App)
}).$mount('#app')

运行上面这些一个基础结构就搭建完成了，上面没做编写详细过程，本人实在很懒，于是就省略了。

最后希望你给出良好的建议或者对你有所帮助。

Vue结合其生态系统搭建单页应用

猜你喜欢