Vue高级篇--实现前后端完全分离
1.Vue
我们之前项目中也使用到了Vue,但是我们之前的vue和我们的java代码是不是都在一个工程下。没有做到前后端完成分离。企业中前端也会由自己的服务器,也有自己的开发工具。
前端服务器Nodejs 开发工具VsCode[我们为了和idea匹配使用WebStorm].
2. 安装Nodejs服务器。
2.1安装npm
因为前端项目也需要依赖一些插件:比如:axios elementui 那么我们可以使用npm下载并安装到当前项目。
我们无需安装因为在nodejs中默认带了该软件
2.2 安装vue的脚手架
脚手架的作用:就是用来帮你创建前端vue工程。
安装的命令: npm install -g @vue/cli
速度很慢
3. 使用脚手架创建Vue工程
3.1.在cmd窗口中输入命令,打开创建界面
vue ui
3.2创建
(1)
(2)
(3)
(4)
(5)
3.3创建完成后
3.3.1![](/assets/blank.gif)
3.3.2安装需要的elementui插件
3.3.3安装axios发送异步请求的依赖
4.使用WebStorm打开Vue工程
关联:npm命令
(1)
(2)
整个项目中node_modules占用项目的空间99%。 以后拿到的项目一定没有node_modules。需要自己在本地安装。
npm install -- 安装项目需要的模块
npm run serve --运行项目 nodejs
4. 聊聊main.js
5.App.vue组件
注意:每个组件必须加 div
5.1一个组件引用另一个组件:
当前组件中导入另一个组件
import hello from './components/Hello.vue'
注册另一个组件
export default {name: 'app',//(2)注册组件components: {hello} }
使用注册的组件
<!--(3)使用组件--> <hello></hello>
5.2父组件如何向子组件传值
5.2.1父组件App.vue定义要传的属性
data() {return {age: 15,names: ["喜羊羊","美羊羊"]}}
5.2.2使用子组件的时候传值
<!--③使用组件 在子组件 props中定义了msg名称 跟子组件保持一致就行--><Hello :msg="names" :msg2="age"></Hello>
5.2.3子组件定义props,并使用
props: {msg: [],msg2: String}
5.2.4子组件使用属性
{{msg[0]}} {{msg2}}
6.浅谈路由
(1)使用路由跳转
<p><!--router-link可以理解为<a> to可以理解为href=路径一旦使用了路由跳转 ----必须找router/index.js文件该文件中配置了路由和组件的映射关系--><router-link to="/home"><el-button type="primary">首页</el-button></router-link><router-link to="/user"><el-button type="primary">用户管理</el-button></router-link></p>
(2)配置router/index.js文件
//不管以后有没有用用到都先把组件引用过来{path: '/home',name: 'Home',component: Home},//使用的时候再把组件引用过来{path: '/user',name: 'User',component: () => import('../views/User.vue')}
这里有两种配置路由的方式,一种是不管用不用直接把组件先引过来,另一种是使用的时候再把组件引过来
(3)渲染组件
<!--渲染组件-->
<router-view/>
Vue高级篇--实现前后端完全分离相关推荐
- Vue全家桶(前后端完全分离)
前序 下载axios npm install axios 在main.js中引入插件import axios from "axios"; 前端 实例 router 路由 在main ...
- dotnet core webapi +vue 搭建前后端完全分离web架构(一)
架构 服务端采用 dotnet core webapi 前端采用: Vue + router +elementUI+axios 问题 使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问.前后端可 ...
- 解答网友提问 | 使用VS2022快速生成React/Angular/Vue.js + Web API前后端集成项目
前言 上次发表了<一键生成Vue.js + Web API前后端集成项目>后,有多位网友来问,有不有其他的前后端集成模板: 实际上,VS2022没有提供前后端集成项目模板. 但是,使用VS ...
- 一键生成Vue.js + Web API前后端集成项目
前言 默认情况下,Visual Studio提供了"基于Vue.js Web 应用程序"项目模板,可以生成Vue.js前端项目. 你需要另外创建Web API项目,调试时需要同时启 ...
- Vue+SpringBoot图书管理系统前后端分离(教你一步一步搭建)
Vue+SpringBoot图书管理系统前后端分离(教你一步一步搭建) 介绍: 说明: 环境搭建 后端环境搭建 1.新建一个工程(只有收费版的idea才有这个选项哦) 2.选择Java8 4.配置工程 ...
- SprinBoot-data-jpa整合Vue使用Swagger2实现前后端分离
SprinBoot整合Vue使用Swagger2实现前后端分离 首先是后台 Swagger相关的依赖 <!--添加对swagger的依赖--><dependency><g ...
- Springboot+vue 社团管理系统(前后端分离)
Springboot+vue 社团管理系统(前后端分离) zero.项目功能设计图 一.数据库设计(项目准备) 1.建表 2.表目录 二.前端编写(vue) 1.搭建Vue框架 2.放入静态资源(as ...
- Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统 快速开发框架,开发小程序和APP的推荐框架!
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统 快速开发框架,开发小程序和APP的推荐框架! 概述 R ...
- php的ci框架前后台分离,基于CodeIgniter框架的前后端完全分离开发
想用CI框架做个网站,有以下几个需求: 1.前后端完全分离,前台和后台都使用JSON格式接口进行数据交换: 2.不管是前台还是后台,其前端和后端都是独立的一个项目. 不知道这个怎么实现,希望各位大牛指 ...
最新文章
- 跟风 Python 的人,后来都怎样了?
- JAVA SE学习day_06:字符流、异常处理
- C/C++浮点数在内存中的存储方式
- BugkuCTF-MISC题split
- 物流机器人小车的运动控制与定位
- webapi实现AJAX多文件上传,AJAX调用webapi上传图片或文件
- 凝思系统改时间_大众改原厂盲点监测系统,中山大众原厂改装,途观L改盲点监测...
- Linux文件系统下的分区和挂载
- linux7配置ftp服务,RedHat 7配置FTP服务
- 在vue2项目中使用腾讯云IM及常见问题
- 深度学习和神经网络介绍
- 如何在国外做好自然科学研究-2
- uuctf-Unicorn shop----easy_web----CheckIN
- 编程题目3——中国大学mooc(这篇博客更新完毕)
- 118.网络安全渗透测试—[权限提升篇16]—[Windows MSF提权模块提权审计工具]
- svn修改offline状态
- cocos2dx中CCTableView乱位问题歪解
- 设计一个灯光控制逻辑电路. 要求红、绿、黄三种颜色的灯在时钟信号的作用下按表P6.30规定的顺序转换状态
- 中海达数据怎么转rinex_中海达GPS数据处理软件包使用手册-(36页)-原创力文档...
- qt 下 原生socket tcp 基本用法
热门文章
- Flutter异常监控 - 肆 | Rollbar源码赏析
- 给女友生日祝福语 简短独特
- 自部署gitlab-ce与Nginx反向代理——基于宝塔BT
- http转https,腾讯云服务器SSL证书安装指引
- 查询出每门课都大于85 分的学生姓名
- springboot 整合 ftp 简单流程
- 企业软文营销重在剪短有效用事实说话
- 5月18日德玛西亚服务器怎么维护,LOL5.18测试服更新内容是什么_LOL5月18日测试服更新内容介绍_游戏堡...
- USB WriteProtector 为你的U盘、移动硬盘等增加写保护功能,防止文件误删或病毒感染...
- Android Studio打包全攻略----Gradle-Build Variants构建定制版App