基于Vue-cl搭建前端工程化项目

一、新建项目

1、先安装脚手架vue-cli，已集成webpack

cnpm install vue-cli -g

输入vue检查是否安装成功，如下图就是安装成功

2、在需要新建项目的目录输入

运行vue init webpack test   注：test为你的项目名

Runtime Only和Runtime+Compiler的选择

但vue最好还是使用后者

3、（生成文件目录后，使用 cnpm 安装依赖

cnpm install 或者 npm install

4、启动项目

npm run dev

二、router

1、router基本属性

path:

component:

mata:

children

2、router分模块

首先了解es6之扩展运算符 三个点（…），注意是浅拷贝，引用数据类型改变会互相影响，如array

https://blog.csdn.net/astonishqft/article/details/82899965

然后参考

https://www.jianshu.com/p/2833243987dd

三、整合vuex

所以中大型的项目才建议使用

使用vuex参考：https://www.cnblogs.com/wisewrong/p/6344390.html

使用global event bus参考：http://www.pilishen.com/posts/Creating-a-Global-Event-Bus-with-VueJs

四、整合axios

五、运用<keep-alive>

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

路由配置：

在父路由指定的home.vue页面中

<template>

    <div>

        <keep-alive>

            <router-view v-if="$route.meta.keepAlive"></router-view>

        </keep-alive>

        <router-view v-if="!$route.meta.keepAlive"></router-view>

    </div>

</template>

然后你会发现再切到keey-alive为true的页面，里面的数据并不会清空，因为并没有销灭该组件

六、多环境配置

主要是围绕node中全局变量process和webpack中DefinePlugin的运用

https://www.jianshu.com/p/5218ad9e0129