一、导航栏配置
在项目开始之前，应该进行导航栏的配置，这种配置对于新人小白来说还是比较难懂，所以由项目经理提供模板进行配置：
导航栏布置成功就可以进行页面布局与数据交互了。
二、进行数据交互（属于横向编程）
整个项目页面部署顺序为：
api->store->vue页面
vue页面->store->api
其中：api用来封装axios接口调用，从swagger-ui中拿出接口路径，进行axios的接口配置。其中findAll接口需要进行分页处理。api中的接口中的数据如果需要进行修改就放入store中进行修改，如果不需要进行修改则直接引入vue页面中
以下是需要修改数据模型中数据的操作：
store用来进行数据的处理，vuex是状态机，所有的数据都通过这一仓库进行处理，然后供vue页面使用。
let storeConf = {
//状态存储的位置
state：{
msg:"hello"
//状态对象必须是纯粹的， （通过“{}”或“new Object”创建的），表示网页中可以访问的变量
}，
//获取 可以获取到state中的数据进行处理再返回
getters:{
//从 store 中的state中派生出一些状态。getter也可以返回一个函数，来实现给 getter 传参。
msgUpper(state){
return state.msg.upperCase();
}
},
//突变 同步操作 修改state中的数据
更改Vuex的store中的状态的唯一方法是提交 mutation，必须是同步操作。mutation函数的第一个参
数为state , 第二个参数是来接受在调用mutation的时候用户传递的第一个实参
mutations:{
// payload 载荷 参数
//喜欢用全大写
CHANGE_MSG(state,payload)
{
state.msg=payload
}，
......
},
//动作 可以放异步操作 提交突变 分发动作
actions:{
//Action函数接受一个与store实例具有相同方法和属性的context对象，因此
你可以调用context.commit提交一个 mutation，或者通过 context.state和 context.getters来获
取 state和getters。第二个参数用来接收用户调用的时候传递的第一个实参
findAll({commit,dispatch},payload){
$.get('',null,(res)=>{
res设置到state中
commit('',res.data)
});
},
deleteById({commit,dispatch},payload){
$.get('',payload,(res)=>{
if(res.status==200){
//分发动作
dispatch('findAll',{});
}
})
}
}
};
修改数据模型中两种方式 提交突变或者分发数据（项目中常用这种方法修改数据模型）
1.提交突变
mutations:{
// st类仓库对象 这里的第一个参数是state
changeMsg(state,payload)
{
state.storeMsg = payload;
}
},
2.分发数据
// st类仓库对象 这里的第一个参数是默认传递的
actions:{
getMsg({commit,dispatch,getters,state},payload)
{
commit('changeMsg',payload)
//changeMsg是mutations定义的
}
}
组件绑定的辅助函数
mapState(namespace?: string, map: Array<string> | Object<string | function>): Object
为组件创建计算属性以返回 Vuex store 中的状态。
第一个参数是可选的，可以是一个命名空间字符串。
对象形式的第二个参数的成员可以是一个函数。function(state: any)
mapGetters(namespace?: string, map: Array<string> | Object<string>): Object
为组件创建计算属性以返回 getter 的返回值
第一个参数是可选的，可以是一个命名空间字符串。
mapActions(namespace?: string, map: Array<string> | Object<string | function>): Object
创建组件方法分发 action。
mapMutations(namespace?: string, map: Array<string> | Object<string | function>): Object
创建组件方法提交 mutation
vue页面中就开始使用：
当使用 let{mapState,mapMutations,mapGetters,mapActions} =Vuex;后，Vuex可以省略.
let{mapState,mapMutations,mapGetters,mapActions} =Vuex;
mapState()
mapGetters()
mapMutations()
mapActions()
computed:{
...mapState(),
...mapGetters()
},
methods:{
...mapMutations(),
...mapActions()
}
如果不需要修改数据模型中数据，则直接在vue页面中调用api接口即可使用~（以batchDelete为例）
三、页面布局（包括HTML、CSS、JavaScript）
对vue页面进行布局并且完成功能实现。属于纵向编程。
可以借用element-ui里的布局进行修饰。
对于按钮功能的实现需要JavaScript来进行实现。在methods中提供相应方法。在data中提供相应属性。
每个模块的功能都不尽相同，需要注意区别。
最后进行项目打包，那么一个完整的项目就做完了~
prod是产品阶段的包，stage是测试阶段的包，来到项目文件夹，执行npm run build：prod /npm run build：stage进行打包，
之后会出现一个dist 的文件夹，其中包括index.html，static，将其部署到云服务器上，访问自己的云服务器相关接口就可以看到项目成品。