一文读懂Sringboot3+vue3安装项目

环境准备

后端环境准备

下载JDK17

安装就下一步下一步,选择安装路径 

配置环境

环境

JDK17+、IDEA2021+、maven3.5+、vscode

后端

基础：javaSE，javaWeb、JDBC、SMM框架（Spring+SpringMVC+MyBatis）、MyBatis-Plus

前端

html、css、javascript，jquery、vue3、Element-ui

springboot是springboot提供的一个子项目，用于快速构建Spring应用项目。快速导入依赖，解决jar包冲突问题，编码更简单、配置更简单、部署更简单、监控更简单。

Springboot特征

1、起步依赖：整合Maven依赖，配置更简单

2、自动配置:bean自动注入ioc容器，编码更简单

3、内置tomcat、Jetty等

环境准备-创建应用springboot3项目

创建项目

创建空项目，配置maven

环境准备-Maven

Maven是apache基金会的开源项目，使用java语法开发，maven单词的本意是：专家，内行

Maven是项目管理工具，可以对java项目进行自动化构建和依赖管理。

IDEA配置本地maven

https://maven.apache.org/download.cgi

配置阿里云远程仓库镜像

<mirror>

    <id>alimaven</id>

    <name>aliyun maven</name>

    <url>http://maven.aliyun.com/nexus/content/groups/public/</url>

    <mirrorOf>central</mirrorOf>

    </mirror>

检验设置是否生效

mvn help:system

前端环境准备

编码工具: VSCode

依赖管理:NPM

项目构建: Vuecli

NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费。

NPM也可以理解为Maven

依赖管理NPM安装配置

NPM官网

https://nodejs.org/en/download/

下载安装完成后

验证 Node.js 是否已成功安装

node -v

在nodejs安装目录创建node_global和node_cache文件夹

cmd命令，依次输入： npm config set prefix "D:\Nodejs\node_global" npm config set cache "D:\Nodejs\node_cache"

npm config set prefix “D:\Nodejs\node_global”：将 Node.js 全局安装包的安装路径设置为 “D:\Nodejs\node_global”。在使用 npm install -g 命令全局安装 Node.js 模块时，将会将模块安装到指定的目录中。 npm config set cache “D:\Nodejs\node_cache”：将 Node.js 模块缓存路径设置为 “D:\Nodejs\node_cache”。在使用 npm install 命令安装 Node.js 模块时，将会将模块缓存到指定的目录中。

修改系统环境变量

F:\Program Files\nodejs\node_global

NODE_PATH

F:\Program Files\nodejs\node_modules

使用npm install express -g全局安装 Express 模块

说明文件权限不够，允许完全控制得以解决

更改 npm 的默认源为淘宝源 npm config set registry https://registry.npm.taobao.org

恢复默认的 npm 官方源 npm config set registry https://registry.npmjs.org

查看当前npm 源的 URL

使用淘宝源全局安装 cnpm。cnpm 是一个基于 npm 的淘宝定制版，可以在国内更快地安装 Node.js 包

npm install -g cnpm --registry=https://registry.npm.taobao.org

Element-Plus项目创建

https://element-plus.org/zh-CN/#/zh-CN

基于 Vue 3，面向设计师和开发者的组件库

vue create elp01

#安装element-plus
npm install element-plus  或 npm i element-plus 

#安装全局引用
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import 'font-awesome/css/font-awesome.min.css';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

demo.vue

<template>

<div>

<el-input class="input" v-model="input" type="file" placeholder="Please input" />

<el-button class="button" type="primary">文件处理</el-button>

</div>

</template>

<script>

import { ElButton, ElInput } from 'element-plus'

import { ref } from 'vue'

export default {

components: { ElButton,ElInput },

    }

</script>

<style scoped>

.input {

display: inline;

margin: 20px 30px;

  }

.button {

width: 90px;

  }

</style>

nulldemo.vue

<template>

<el-empty description="description" />

</template>

启动

npm run serve 

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！