本项目的git仓库https://github.com/lznism/xiachufang-vue
对应的使用typescript实现的版本地址https://github.com/lznism/xiachufang-vue-typescript
项目的后台地址https://github.com/lznism/xcf-server
本实例对初学者友好,欢迎star,交流学习,有任何问题都可以issue交流~
技术栈
本项目采用vue+vuex+vue-router
技术栈,网络请求采用axios
,为业余前端练手项目,项目框架采用vue-cli
构建
项目使用
本项目需要首先运行后台,先将整体项目克隆下来,然后运行npm start
git clone https://github.com/lznism/xcf-server.git
注意,我这里采用了nodemon
这个工具,如果没有这个包,需要先安装npm i nodemon -g
后端项目默认跑在3000
端口上,前端本地环境默认跑在8080
端口上,因此这里涉及到跨域的情况,我在config/index.js
的proxyTable
中
项目文件夹介绍
assets 项目的静态文件目录
components 通用组件目录
router 项目的路由目录
store vuex目录
utils 工具方法目录
views 视图目录
App.vue 项目的根组件
main.js 项目的入口文件
项目技术点
- 引入fastclick,避免300ms延时
- 采用rem布局
- 采用图片懒加载 vue-lazyload
- 加入vuex,本项目中使用vuex只是为了练习,vuex并不是到处都合适
vuex的使用场景
需要实现组件通信
状态共享
- 采用路由懒加载
说明
本项目模仿下厨房构建