前端小米商城项目总结（1）

项目确定使用框架

首先用的Vue框架进行组件化开发，Element框架支撑，js，css，html的代码逻辑通过ajax进行接口的请求调用，达到获取服务器数据的目的。再完美的渲染的页面。

项目进行前开发规范定制

团队开发协作

		**项目例会**
       封装命名项目规范/统一

     	规范

       命名规范 （方法名，变量名 ……）

       封装规范 (功能，参数，返回值，如何使用……)

       项目规范（主要模块，功能模块 ，组件，路劲，位置……）

开发项目

       每日项目例会  检查

       项目拆分

       领取任务

       时间预估

       团队内代码拼比
		
	   团队内部代码审核
       
       进度汇报

所使用技术栈

vue组件化开发
Proxy跨域
API封装
路由鉴权
VUEX

项目进行

1.首先需要解决跨域问题，请求到数据，使用Proxy处理跨域
需要创建一个vue.config.js文件，配置proxy的开发环境。
代码示例：

//跨域
module.exports = {
    publicPath: "./",
    devServer: {
        open: true,
        proxy: {
            '': {
                target: "http://39.100.7.70:81/",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ""
                }
            }
        }
    }
};

2.API封装
将常用API拆分之后代入main.js中

3.路由鉴权(权限)
项目使用本地+全局路由鉴权+vuex
路由鉴权：

//全局路由拦截
router.beforeEach(function (to, from, next) {
  if (/(collect|addOrder|shoppingCart|order)/.test(to.path)) {
    if (!store.state.userName) {
      next(false)
    } else {
      next()
    }
  } else {
    next()
  }
})

4.路由懒加载
配置代码：

	{
		path: '/user',
		name: 'User',
		component: () => import( /* webpackChunkName: "user" */ '../components/user/user.vue'),
		meta: {
			bread: ['用户管理管理']
		}
	},