web前端商城项目总结（上）

Posted 2021-05-15 Frazier_梁超

项目架构（确定使用框架）

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

项目前（定制开发规范）

   团队协作/开发

           规范/统一

           开发规范

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

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

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

   开发项目

           每日进度例会 / 检查

           进度汇报

           项目拆分

           领取任务

           时间预估

           团队内代码拼比/审核

技术栈

项目中

一 首先要解决跨域的问题，要不什么数据都拿不到（Proxy处理跨域），创建一个vue.config.js文件，配置一下proxy开发环境。

代码如下：

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

二 API 的封装

       要把常用的API拆分出去最后导入main.js中就可以了

三 鉴权（页面权限）

     本项目使用的本地 + 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()
  }
})

四 路由懒加载

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