01 创建前端项目【小白入门SpringBoot + Vue3】

项目笔记，教学视频来源于B站青戈
https://www.bilibili.com/video/BV1H14y1S7YV

从0带小白自学SpringBoot + Vue3，编程小白白快来上车！

软件安装

• vue官方文档：简介 | Vue.js (vuejs.org) 介绍了vue使用方法。
• 微信公众号：Java学习指南， 回复：软件
• 使用软件webStorm作为开发工具。
• 安装nodejs16版本。若想安装nodejs的其他版本，Previous Releases | Node.js (nodejs.org) ，确定好版本后，点击relese进入另一个界面，选择msi为后缀的安装包进行下载，一般电脑都是64位的。
• 下载安装完成、配置好后，来到cmd命令行，输入node -v ，若出现版本号，则说明安装配置成功。
• 下一个在cmd命令行，输入npm -v ，显示版本号。补充，npm可以设置一个淘宝镜像，方便提高下载速度。

npm config set registry https://registry.npm.taobao.org

创建项目

注意，创建项目的时候，会自动创建一个文件夹，所以需要想好，打算把这个自动创建的文件夹放在哪个文件路径下。

• 打开cmd命令行

• 切换到目标文件夹的路径下。
  打开cmd命令行，一般默认是处在C盘路径下，但创建项目大多数在D盘，要切换到D盘，输入D: ，然后再输入目标路径，比如说，输入cd D:\Projects 。那么接下来就会在这个路径下，根据创建项目的过程，自动生成一个新的文件夹。

• 输入 npm init vue@latest 。初始化完成后，就会进行一系列项目配置。

  下面是配置信息，: 和 ?后面的根据自己的需要填写或选择，如果不知道不了解不需要，可以先选择No。这是up的演示

  • project name : vue3-demo
  • Add TypeScript ? No
  • Add JSX Support? No
  • Add Vue Router for Single Page Application development ? Yes
  • Add Pinia for state management ? No
  • Add an End-to-End Testing Soluting? No
  • Add ESLint for code quality ? No

• 项目配置完成后，会出现三行绿色的代码。依次输入命令行中

  • cd vue3-demo

  切换到生成的项目路径下。注意有个快捷方式，cmd命令行输入cd v，然后再点击
  Tab键。

  • npm install

  照抄输入命令行。前面设置了npm淘宝镜像，所以下载速度会快些

  • npm run dev

  照抄输入命令行。会出现一个本地网址，可以放到浏览器中加载初始网页。

element-plus安装

访问官网 安装 | Element Plus (gitee.io) ，里面有指导文档。项目里面，加入elementplus，减少自己手写页面。

npm install element-plus --save

可以在cmd 命令行输入上面的安装指令（切换到项目的路径下）；

或者在webStorm里面（前提，已经打开这个项目），打开终端页面步骤如下图，然后输入上面安装指令。

补充

• 该路径下vue3-demo\src\assets ，有一些静态文件，和初始的很多变量，若不需要，可以删掉。
• 若需要自动补全标签，可以打单标签，然后单击’Tab’键

调整代码

打开src\App.vue文件。先清空内容，保留基础标签

<script setup>
script>

<template>
 <div>
   <RouterView/>
 div>
template>

<style scoped>
style>
1
2
3
4
5
6
7
8
9
10
11

删除src/components路径下的所有初始文件。

删除src/views文件夹下的AboutView.vue文件，同时在src/router/index.js文件中，删除关于about的路由。

来到src/assets/main.css ，清空初始内容，重写，去除一些默认样式。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
1
2
3
4
5

up的版本依赖跟我有些不一样。

这是他的

"dependencies": {
    "element-plus": "^2.3.6",
    "vue": "^3.3.2",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.3.5"
  }
1
2
3
4
5
6
7
8
9

下面是我的，希望不会有太大冲突。

  "dependencies": {
    "element-plus": "^2.4.1",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.4.0",
    "vite": "^4.4.11"
  }
1
2
3
4
5
6
7
8
9

补充：

• 关于src/assets/main.css，这个路径下的main.css文件，被导入到main.js中，这样就会全局生效。这意味着，若以后有其他单独的css文件。也可以导入到main.css中，这样比较方便，不用再到其他地方导入。

• 按照下图，梳理一下main.css => main.js => index.html的逻辑关系。

main.js很关键，从这里可以看出，App.vue是所有页面的切入口。

体验elementplus

参照elementplus官网的”快速开始“，体验。

src/main.js中，导入elementplus，如下图。

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)
1
2
3
4

也可以去官网，拿一些小组件，比如按钮、表格等放入代码，复制粘贴在src/views/HomeView.vue里面，试试效果。