当前位置: 首页 > news >正文

(一)搭建springboot+vue前后端分离项目--前端vue搭建

项目整体框架

在这里插入图片描述

1.Vue的安装

vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型, 让JavaScript 运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

vue和nodejs的区别:

  • 服务环境不同:vue相当于java中的spring框架,而nodejs相当于Java中的JVM虚拟机,即是运行环境;
  • 使用的数据不同:Node.js使用了一个事件驱动、非阻塞式I/O的模型,使其轻量又高效。vue.js有路由的叫vue-route.js

1.安装Node.js
node官网: 下载并安装:node-v8.9.0-x64.msi
安装后检查是否安装成功:npm -v
在这里插入图片描述
或者可以使用nvm管理工具(可以百度一下使用方法);
在这里插入图片描述

2.安装Vue脚手架:
 cmd以管理员身份执行
   npm install vue-cli -g  
 或者安装淘宝版

 cnpm install vue-cli -g

查看是否安装成功

vue -v

3.创建项目:
vue init webpack myProject (项目名字)
4.安装成功后,打开项目

 cd springboot-vue-demo
 npm run serve

5.直接把springboot-vue-demo拖入到IDEA
在这里插入图片描述
6.设置自动按钮
在这里插入图片描述
7.之后设置自动打开,并跳转到指定页面:
可参考:vue启动时自动跳转到127.0.0.1

2.使用elements-plus组件

1.在IDEA上安装element-plus组件
终端上运行:

npm install element-plus --save --legacy-peer-deps

2添加配置信息:
在这里插入图片描述
若要设置中文可参考:elements设置中文

相关文章:

  • 【JavaScript-内置对象】找对象,那家好,内置对象错不了,方便简单,还好用
  • 【面试专线】【基础知识】【JAVA】基础(三)(简答版)
  • Java项目:SSM律师事务所律师管理系统
  • 《MongoDB入门教程》第11篇 数组运算符
  • java Python+Django的大学生提问论坛系统-在线答疑系统
  • Vue学习第18天——Vue中的过度与动画效果的使用与案例
  • 设计模式 单一职责原则、开放封闭原则、依赖倒置原则、里氏代换原则
  • Codeforces Round #816 (Div. 2)补题(A-E)
  • 【牛客网-公司真题-前端入门篇】——百度2021校招Web前端研发工程师笔试卷(第二批)
  • 【Android应用与开发】DAY1-安装Android Studio报错整合及学习
  • Mybatis实战练习六【批量删除Mybatis参数传递】
  • 小白量化《穿云箭集群量化》(1)小白草根超级量化软件介绍
  • C语言指针操作(七)*指针数组和多重指针
  • 【python经验总结】我与bug的那些日子
  • <栈和队列及模拟实现>——《Data Structure in C Train》
  • [nginx文档翻译系列] 控制nginx
  • 【附node操作实例】redis简明入门系列—字符串类型
  • 【跃迁之路】【699天】程序员高效学习方法论探索系列(实验阶段456-2019.1.19)...
  • C++类的相互关联
  • ES6语法详解(一)
  • input实现文字超出省略号功能
  • isset在php5.6-和php7.0+的一些差异
  • JAVA_NIO系列——Channel和Buffer详解
  • JavaScript标准库系列——Math对象和Date对象(二)
  • javascript数组去重/查找/插入/删除
  • MQ框架的比较
  • Netty源码解析1-Buffer
  • spring-boot List转Page
  • SpringBoot 实战 (三) | 配置文件详解
  • Vue学习第二天
  • 分享几个不错的工具
  • 基于阿里云移动推送的移动应用推送模式最佳实践
  • 罗辑思维在全链路压测方面的实践和工作笔记
  • 排序(1):冒泡排序
  • 七牛云假注销小指南
  • 入手阿里云新服务器的部署NODE
  • 想使用 MongoDB ,你应该了解这8个方面!
  • 最简单的无缝轮播
  • AI又要和人类“对打”,Deepmind宣布《星战Ⅱ》即将开始 ...
  • ​ 全球云科技基础设施:亚马逊云科技的海外服务器网络如何演进
  • ​马来语翻译中文去哪比较好?
  • #我与Java虚拟机的故事#连载14:挑战高薪面试必看
  • (16)UiBot:智能化软件机器人(以头歌抓取课程数据为例)
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (笔记)Kotlin——Android封装ViewBinding之二 优化
  • (层次遍历)104. 二叉树的最大深度
  • (附源码)springboot 基于HTML5的个人网页的网站设计与实现 毕业设计 031623
  • (附源码)ssm高校志愿者服务系统 毕业设计 011648
  • (附源码)ssm户外用品商城 毕业设计 112346
  • (六)软件测试分工
  • (三)Honghu Cloud云架构一定时调度平台
  • (终章)[图像识别]13.OpenCV案例 自定义训练集分类器物体检测
  • (转)真正的中国天气api接口xml,json(求加精) ...
  • .net Application的目录
  • .NET Core实战项目之CMS 第十二章 开发篇-Dapper封装CURD及仓储代码生成器实现