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里面(前提,已经打开这个项目),打开终端页面步骤如下图,然后输入上面安装指令。
01 创建前端项目【小白入门SpringBoot + Vue3】_第1张图片
01 创建前端项目【小白入门SpringBoot + Vue3】_第2张图片


补充

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

调整代码

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

<script setup>
script>

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

<style scoped>
style>

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

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

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

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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"
  }

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

  "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"
  }

补充:

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

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

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

01 创建前端项目【小白入门SpringBoot + Vue3】_第3张图片


体验elementplus

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

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

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

app.use(ElementPlus)

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

你可能感兴趣的:(前端,spring,boot,后端)