这里我使用的是vu2搭建的项目 技术栈使用的vue2 axios dayjs vuex sass element-ui vue-router babel-plugin-transform-remove-console sortablejs .eslintrc mockjs
首先使用vue搭建项目
项目搭建包括了
登录页面(登录页面样式的编写, 表单验证 ,自定义表单验证 调用接口存储token 登录成功 跳转页面) 存储token 使用到了localStorage
配置路由(使用路由懒加载配置路由 配置一级路由 还有二级路由 路由里面包括了二种路由模式哈希hash history模式 一般默认的使用的哈希hash模式)
需要配置路由拦截：只要路由值发生改变就会触发
请求拦截 :只要发送请求就会重触发
请求拦截里面需要配置 添加请求拦截器 还有响应拦截器(需要响应的数据做什么操作)
首页
Table页面的搭建
table页面样式的编写,
table表格页面的新增
table表格页面的修改
table表格页面的删除
table表格页面的筛选
table表格页面列的Drag
其中table页面的交互效果使用的是mockjs 因为涉及到table页面的新增 修改 删除 筛选
使用mockjs实现的新增 修改 删除 的接口功能 其中还涉及到列表的分页功能(page)
这里需要封装一下api接口 方便管理
部署项目确定生产环境还是开发环境
如果是上线环境就调用线上的cdn 上线的时候不需要node_modules里面的js文件 进行打包优化
还需要解决白屏问题
publicPath: './'
这里我使用的是阿里云与宝塔部署前端项目 阿里云有三个月的免费试用期 可以使用一下阿里云的云服务器部署 云服务器会生成一个公网IP 这里可以对ip的请求次数进行一个限制
把打包之后的dist文件部署到 宝塔上面就可以了
其中需要配置一下nginx.config 文件其中需要配置nginx 可以访问到你的文件的位置 Demo版本项目从搭建到部署的过程 里面可以有非常多的需要注意细节的地方
