前后端分离-前端搭建(vue)

前端使用vue.js,那么怎么搭建vue.js呢

先安装nodejs以及npm

现在基本的nodejs都包含有npm,下载安装后,

可以在cmd命令里输入

node -v 和npm -v 分别查看安装的版本

两个都显示了版本就是安装ok

nodejs安装成功之后,就安装vue

直接cmd命令里运行

npm install -g vue-cli (只需要第一次安装时执行)

选定一个开发路径

在文件里运行cmd 执行命令

vue init webpack project(文件下的项目名) 初始化你的项目,

cd project 进入你的项目目录里

npm install 下载依赖

npm run dev 启动项目

两个npm命令也可以在软件(就是下面说的那个前端开发软件)中去执行

在这里插入图片描述

这样弄好后 ,以后启动项目直接在这右上角就可以直接启动了 ,就不用每次都去输入命令

然后在浏览器里输入 http://localhost:8080

有个绿色的倒三角形 以及下面一些英文 说明成功了

有个专门的前端开发软件和idea是同一个公司开发的软件 JetBrains WebStorm

和idea同样的快捷键

下载好了前端软件后,打开
在这里插入图片描述
在这里插入图片描述

选择这里的open 打开你刚刚创建的vue项目

大致框架如下
在这里插入图片描述

使用vue开发后端,只有一个静态页面 index.html

同样是在src里面进行开发

1.build 文件夹,用来存放项目构建脚本
2.config 中存放项目的一些基本配置信息,最常用的就是端口转发
3.node_modules 这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件
4.src 这个目录下存放项目的源码,即开发者写的代码放在这里
5.static 用来存放静态资源
6.index.html 则是项目的首页,入口页,也是整个项目唯一的HTML页面
7.package.json 中定义了项目的所有依赖,包括开发时依赖和发布时依赖
8.对于开发者来说,以后 99.99% 的工作都是在 src 中完成的,src 中的文件目录如下:

在这里插入图片描述

1.assets 目录用来存放资产文件
2.components 目录用来存放组件(一些可复用,非独立的页面),当然开发者也可以在 components 中直接创建完整页面。
3.推荐在 components 中存放组件,另外单独新建一个 page 文件夹,专门用来放完整页面。
router 目录中,存放了路由的js文件
4.App.vue 是一个Vue组件,也是项目的第一个Vue组件
5.main.js相当于Java中的main方法,是整个项目的入口js

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 外卖项目的前后分离是指将项目的前端部分和后部分进行分离开发,前端使用Vue框架,后使用Spring Boot框架。 前端使用Vue框架可以提供良好的用户界面和交互体验。Vue具有组件化的特点,使得前端开发更加模块化和可维护。同时,Vue的数据绑定和响应式设计可以帮助实现快速更新页面的功能。通过Vue,用户可以方便地浏览外卖项目的菜单、下单、支付等操作,提升用户的使用体验。 后使用Spring Boot框架可以提供强大的后台支持。Spring Boot是一种轻量级的Java框架,可以快速搭建和部署项目,减少开发的复杂度。使用Spring Boot,开发人员可以方便地实现外卖项目的后台逻辑,例如订单的处理、菜单的管理、支付的接口等。同时,Spring Boot集成了许多常用且可靠的开源库,为项目提供了高效、稳定的基础设施。 前后分离的优势在于前端和后可以并行开发,提高开发效率。前端和后之间通过定义接口进行通信,降低了耦合度,灵活性更强。同时,单独部署前端和后也可以提高项目的可维护性和可扩展性。例如,当需要添加新的功能或修改现有功能时,只需要修改相应的前端或后代码,而不会影响到整个项目。 总之,外卖项目的前后分离以及使用Vue和Spring Boot框架的设计选择,可以帮助实现一个高效、稳定、可扩展的外卖平台。 ### 回答2: 外卖项目采用前后分离的架构,前端使用Vue框架,后采用Spring Boot框架。 前端使用Vue框架可以实现用户界面的可视化设计和交互体验。Vue框架具有简单易用、灵活可扩展、高效性能等特点,适用于构建复杂的单页面应用(SPA)。通过Vue框架,可以实现用户注册、登录、浏览菜单、购物车管理、订单处理等功能的前端设计和开发。前端通过调用后接口,获取后处理的数据,并将数据展示在用户界面上。 后使用Spring Boot框架可以实现业务逻辑的处理和数据存储。Spring Boot框架提供了快速构建、简化配置和集成多种功能的特性,适用于快速开发和维护可靠的应用程序。通过Spring Boot框架,可以处理用户注册、登录验证、菜单管理、订单处理等业务逻辑,并与数据库进行交互,存储与外卖项目相关的数据。后还需要提供RESTful接口,供前端调用和交互。 前后分离架构的好处是可以实现前端与后的解耦,提高开发效率和维护性。前端和后可以同时进行开发,并可采用不同的技术栈,使得团队成员能够专注于自己的领域。前后分离还可以实现多复用,例如可以用同一组后接口提供给Web和移动调用。 总的来说,外卖项目采用前后分离的架构,借助Vue和Spring Boot框架实现了用户界面的展示和交互以及业务逻辑的处理和数据存储,从而使得项目开发更加高效和可维护。 ### 回答3: 外卖项目采用前后分离的架构,前端使用Vue.js框架进行开发,后使用Spring Boot框架进行开发。 前端使用Vue.js框架的原因是因为Vue.js具有简洁、高效、灵活的特点,能够轻松构建交互式的用户界面。Vue.js还拥有一套完整的生态系统,能够方便地进行组件化开发,并提供了强大的工具来处理数据和状态的变化。 后使用Spring Boot框架的原因是因为Spring Boot是一个简化了Spring开发的微框架,能够快速构建可独立运行的、生产级的应用。Spring Boot提供了大量的开箱即用的特性,如自动配置、快速开发等,能够极大地提高开发效率。 在外卖项目中,前端负责用户界面的展示和交互逻辑的实现。前端通过Vue.js进行组件化开发,将页面拆分为多个可复用的组件,提高开发效率和代码维护性。前端还通过Vue.js提供的路由功能,实现不同页面之间的跳转和导航。同时,前端还与后通过HTTP协议进行通信,获取后提供的数据和服务,并将其展示给用户。 后负责处理前端发送的请求,并根据业务逻辑进行相应的处理,最终返回数据给前端。后还负责与数据库交互,对数据进行增删改查操作。后使用Spring Boot提供的RESTful风格的API,能够轻松构建出符合规范的接口。同时,后还可以利用Spring Security进行权限管理,确保只有具备相应权限的用户才能访问特定的接口。 综上所述,外卖项目采用前后分离的架构,前端使用Vue.js框架进行开发,后使用Spring Boot框架进行开发,能够提高开发效率和代码的可维护性,同时还能够满足用户对于界面交互和数据操作的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值