如何启动vue项目及vue语法组件化不同标签应对的作用说明

提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每个知识点，都是写出代码和运行结果且前后关联上的去分析和说明（能大量节约您的时间）。

所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~

---

---

本文章是系列文章，技术栈内容为：【springboot+vue】【前后分离】
【详细图文，实操步骤分享，节约时间版】。最终完成一个商业化项目。内容有：
springboot知识
mybatisPlus知识
vue知识
node.js知识

本小节的内容是：
vue篇章 之 ： 08.启动vue项目及自行编写一些标签和样式

---

---

每一个文章小节都会把 标题 说的很清楚。前后关联看，可以快速实现：前后分离。本质上，额外文章链接和文章自己标题内容关系不大。

前面小节文章已经实现springboot的创建，springboot关联前端数据swagger和springboot通过mybatisplus操作数据库：
【2025年】基于电脑的jdk1.8通过idea创建springboot2.x版本(非常简洁快速)
【上榜文章，一文搞定】现在springboot是3.x以上版本，jdk版本至少要求17.但是很多时候我们电脑是jdk1.8(求稳定性和安全性)。文本分享本机电脑1.8的jdk。idea如何非常简洁快速的创建springboot
文章里面也有 为什么只能是jdk17起和地址指定为阿里云报错的解决办法

前面小节已经安装好node.js和分享了一些vue语法，及RESTful风格及swagger的使用：
vue.js基本语法及开发环境准备

---

前言

当前 实现前后分离项目进度：已经创建好了vue项目，也分享了vue项目的工程结构，包括main.js等等核心文件
放在一起 文章太长，且拆分开之后，每个标题专注相关内容。也有一些扩展在对应的文章里面
【从0开始，一文搞定】通过node.js里的NPM来创建vue项目，及项目层级目录说明

---

一、启动vue项目

通过命令启动，注意的是输入命令的层级位置：在整个vue工程的根目录

比如我的项目工程在这个位置，就从这个位置开启终端，输入命令：
npm run serve

也可以在vsCode里面打开终端,输入命令(vsCode里面的终端，命令就直接能对应到工程根目录位置)
菜单栏–>view -->Terminal打开终端输入命令：npm run serve

输入命令，回车，等待

显示成功：

告诉我们 成功之后，对应的网址

输入网址：地址localhost:8080/

默认的标签及内容。
其实正好，当我们有一些html基础之后，可以查看vsCode里面的代码标签,也能看出它是怎么运行的:

---

二、分析项目内容及启动流程

根据第一点.开打网页之后.
回到vsCode查看对应的代码:

main.js 是主程序入口。==》 项目启动之后，它加载的main.js里面的内容
把当前位置的App.vue 文件 导入进来之后，取了一个名字是App
( from ./App.vue)
然后创建了一个App对象 影响id为app的标签
系列文章内容其实 从来不会 跳跃分享内容，这个main.js和package.json 等等核心文件，在上一小节分享了：如何创建vue工程，工程的所有文件目录。
系列文章内容其实 从来不会 跳跃分享内容，那个.mount('#app')语法，影响id为app的标签。前面文章也分享了vue的语法语义，当时文章还没有vue项目结构和组件化开发的概念。用的html语法来分享的

./App.vue 这个文件在main.js被导入。
xxxx.vue文件是组件化开发的语法。由三个标签组成(前面文章有详细分享)，得知：
1.先看script标签， 引入了当前层级结构的component文件夹里面helloworld.vue文件，在取了一个名字是 HelloWorld
2.在js语法代码里面，设置了一个标签名字为：HelloWorld(这个标签就代表helloworld.vue文件)
3.在template标签里面，先引入了一个logo图片，然后使用自定义标签HelloWorld引用helloworld.vue文件里面的内容
4.在style标签，写了当前网页的css样式

所以：我们看App.vue的网页：里面有一个logo图片img。引用了另一个vue文件的内容(helloworld.vue)。

---

三、根据分析自行修改标签和样式

根据第二点：
1.把上一个的【import HelloWorld from ‘./components/HelloWorld.vue’】删了
不引入这个文件并不取这个名字
`那么现在main.js 打开就是一个光logo图片了呗

<template><img alt="Vue logo" src="./assets/logo.png"></template><script>export default {name: 'App',components: {}
}
</script>
style没有截屏，也没有删它

2.在`components文件夹里面 创建一个新的vue文件
bbz.vue

3.在新的bbz.vue里面写上template标签（这个标签是 填写HTML标签的）
其他js逻辑和样式，目前暂时没写。各位可以自己加上，颜色字体大小…

<template><h1>你好，帮帮志</h1>
</template>
<script>
</script>
<style>
</style>

4.在App.vue里面引入import bangbangzhi from ‘./components/bbz.vue’
5.在App.vue里面的template标签 里面调用自定义标签：bangbangzhi
组件化 开发。 您复制多少个bangbangzhi 标签 logo(img我们没有删)下面就就有多少个 bangbangzhi 的内容

<template><img alt="Vue logo" src="./assets/logo.png"><bangbangzhi></bangbangzhi><bangbangzhi></bangbangzhi><bangbangzhi></bangbangzhi><!-- 复制多少个   就多几个h1  任意调用 -->
</template><script>
import bangbangzhi from './components/bbz.vue'export default {name: 'App',components: {bangbangzhi}
}
</script>

vue推荐的就是组件化开发。 高内聚：三个标签在一起描述一个模块(script标签：js代码。style标签：css样式 。template标签：这里面的html标签)
如菜单栏，如某个div显示栏，然后可以来来回回的复用和调用

---

总结

说明一下：整个这个系列实现前后分离的springboot+vue项目。序号文章一共也就10几篇，只有核心图文重点操作步骤来实现这个目标(基本上您边看边写：一个小时或者一上午就能跟着一起手搓一个前后分离项目，然后您可以自行添加功能和内容在您项目里面)

其他扩展细节知识点，本系列省略了(或者有链接)如：
vue还有一些案例，但是现在案例基本满足大部分情况，毕竟当前我们的目的是：快速手搓一个前后分离的全栈。
vue.js的其他功能及使用，管它*现在*用不用的上，内容全部丢进来。各位看官自行消化。那~可能会很多很多了（又耗时）。当前 系列： 手搓出来之后，您可以自行加功能和内容

（会陆续更新非常多的IT技术知识及泛IT的电商知识，可以点个关注，共同交流。ღ( ´･ᴗ･` )比心）
（也欢迎评论，提问。 我会依次回答~）