从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目

2024-05-06 07:55:17

从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建

参考学习vue官网文档
https://v3.cn.vuejs.org/guide/installation.html#%E5%8F%91%E5%B8%83%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E

一.首先安装Vue CLI

这里安装是通过 npm 进行安装

npm即 Node Package Manager，Node.js 环境中的软件包管理器。随 Node.js 一起被安装。

需要先下载安装 Node.js

下载地址

安装后打开cmd

输入node -v 查看版本
nmp - v

输入 npm -g install npm ，将 npm 更新至最新版本。

可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。安装 cnpm 的命令为 ：npm install -g cnpm --registry=https://registry.npm.taobao.org完成后就可以使用 cnpm 替代 npm 了，我不太喜欢用 cnpm，喜欢用的小伙伴注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。

使用 npm install -g vue-cli 安装Vue CLI(脚手架)。

vue-cli 这个构建工具大大降低了 webpack 的使用难度，开箱即用的特性，大大降低了我们的学习成本，加快了我们的开发速度。

二.安装完之后创建项目

在一个磁盘下创建文件

输入 vue create springboot-vue-demo

创建一个名为 springboot-vue-demo的项目
接着选择

接着
选择vue的版本

保存一下
创建工程完毕

输入以上命令启动

http://localhost:8080/ 去浏览器查看

这就是vue工程自带的一个界面

从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目相关推荐

从0搭建一个Springboot+vue前后端分离项目(四)利用Element框架搭建页面主体部分表格与侧边栏
https://element-plus.gitee.io/zh-CN/component/menu.html 导航栏部分选定menu菜单,选择竖型样式的复制一下 <el-menudefau ...
从0搭建一个Springboot+vue前后端分离项目(七)完善前台与后台的联系,完善功能接口
将之前前端写的表格内容,与数据库新建的表进行对应启动项目把写死的TableDa数据删掉.因为最终要从后台读取完善新增接口 <el-button type="primary&quo ...
从0搭建一个Springboot+vue前后端分离项目(八)把数据从后台传到前端进行展示渲染,完善增删改查
首先引入hutool工具类 Hutool是一个Java工具包类库,对文件.流.加密解密.转码.正则.线程.XML等JDK方法进行封装,组成各种Util工具类 Hutool是一个小而全的Java工具类库 ...
从0搭建一个Springboot+vue前后端分离项目(三)使用idea进行页面搭建+Element框架
因为搭建一个后台管理系统,如果要手写CSS样式很繁琐,这里使用ELement框架安装Element npm install element-plus --save 引入Element import ...
从0搭建一个Springboot+vue前后端分离项目(五)创建后台Springboot工程
前往Springboot官网 https://start.spring.io/ 选择版本和依赖 SpringWeb: 可以实现接口的开发; MysqlDriver:连接数据库; Lombok简化jav ...
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建
把(一)里面创建好的项目文件夹拖入到IDEA里面进行完上步操作后就可以快捷的启动项目了这里稍微修改一下可以让我们启动项目后,自动地打开页面页面搭建和改造对此项目文件进行改造,改造成最终我们需要 ...
从0搭建一个Springboot+vue前后端分离项目(六)后台编写配置类与接口
新建一个包,里面放入一些常用的配置类引入mybatis-plus包与插件引入包前往官网查看 https://baomidou.com/pages/226c21/#%E5%88%9D%E5%A7% ...
基于SpringBoot+Vue前后端分离的在线教育平台项目
基于SpringBoot+Vue前后端分离的在线教育平台项目赠给有缘人,希望能帮助到你!也请不要吝惜你的大拇指,你的Star.点赞将是对我最大的鼓励与支持! 开源传送门: 后台:Gitee | Gi ...
超详细！4小时开发一个SpringBoot+vue前后端分离博客项目！！
小Hub领读: 前后端分离的博客项目终于出来啦,真是花了好多心思录制咧.文末直接进入B站看视频哈! 作者:吕一明项目代码:https://github.com/MarkerHub/vueblog 项 ...

最新文章

热门文章