Vue练手项目(包含typescript版本)

2024年3月16日 174次阅读 来源: lznism

本项目的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 项目的入口文件

项目技术点

  1. 引入fastclick，避免300ms延时
  2. 采用rem布局
  3. 采用图片懒加载 vue-lazyload
  4. 加入vuex，本项目中使用vuex只是为了练习，vuex并不是到处都合适，vuex的使用场景1.需要实现组件通信，2.状态共享
  5. 采用路由懒加载

说明

本项目模仿下厨房构建

    原文作者：lznism
    原文地址: https://segmentfault.com/a/1190000014456568
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞