6.【从0开始，一文搞定】通过node.js里的NPM来创建vue项目，及项目层级目录说明

通过NPM来创建vue脚手架，及脚手架目录说明

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

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

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

本小节的内容是：
vue篇章 之 ： 06.创建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基本语法及开发环境准备

前言

因为本文章是系列文章，目的是实现springboot+vue。所以前端开发工具使用的vsCode。截屏演示也是通过vsCode来实现的，如需安装，链接：
【一文搞定，从0开始】安装vsCode及创建Html和点击run查看运行出网页

一、NPM是什么

NPM（node package manager 直译：node 包 管理者）
NPM是一个node.js包管理和分发的工具。
NPM 有 优秀的依赖管理机制和庞大的用户群体，目前已经成为整个js领域的依赖管理工具
NPM 最常见的用法就是安装和更新依赖，要使用NPM。需要安装node.js
就和java的maven有点像。 一种依赖的管理

您安装好了node之后，NPM就安装好了(NPM属于node)

二、安装vue cli

vue cli是什么

vue cli是Vue官方提供的构建工具，通常称为脚手架。
用于快速搭建一个带有热加载 的 构建生产版本等功能的单页面应用
vue cli 基于webpack创建，也可以通过项目内的配置文件进行配置。

核心逻辑：
通过NPM把vue/cli脚手架下载下来，让电脑具备这个功能
在通过vue/cli来创建一个vue项目

安装

命令：npm install -g @vue/cli
直接在cmd里面写这个命令

等在下载

测试是否安装完毕

三、创建vue脚手架工程

创建项目的命令：vue create bbzvue
bbzVue 是您的项目名字，而这个命令在哪个层级位置输入的，这个工程文件夹就在哪里。所以：您需要到对应 --->您想放工程的文件夹位置去打开终端来 : 输入这个命令
工程名字 不能有大写，有大写会报错~

输入命令之后，会开始选择：

建议选择第三个，如图，因为：前两个建议不选，eslint意思是检查语法风格，默认了很多是固定格式风格和语法(您会的话，就非常快速及方便)。但是，我想：如果您是大神，请随意。但既然是来看我文章的同志，那么还是选第三个(自定义项目配置，手动选择功能)

有些默认是被选中的，用空格 可以 取消/选中（我们取消默认被选中的。）
仅仅把babel选上。（空格）不要按错了（其他目前用不上）

选择版本，3还是2.我们选择3.
所以：最开始我们选择的第三个，就是体现在这里，最开始您选择vue3，这些个都没有，直接。咔~建好了，拿去吧~

package.json 记录的就是依赖信息(创建完，我们去看，就类似于maven的pom.xml。用json格式来记录，修改查阅比较方便。第一个是日志文件，不怎么方便)。我这个图就是显示异常，尽力了。看文字吧

现在问：要不要存一个 快照， 后面整蹦了，可以直接回退到快照(还原的意思嘛)
我这里不存 所以：N 回车
这个图 上面也能看到我刚才的选择的选项

等待即可

它会联网 下载刚才选择的内容 就是帮我们创建一个文件目录(您的项目工程结构)
自带很多对应不同功能的文件夹。我们自己只管写vue风格的js代码
这也是前端同事和后端同事 经常相互吐槽的一个地方，前端：我直接命令敲几个回车，项目就有了。后端：我用idea勾选几个依赖，项目就好了。。。。前端：但是你还要弄各种配置和xml 。 后端： 。。。。 不写了，我不再这里引战了哈~

等待完毕，然后会输出很多日志，最后能看到 成功创建项目：bbzvue

它提示了两个命令
一个cd 项目名
(正好我们这个命令的位置输入的创建项目命令 ，正好是创建出来项目的父层级 ， cd就进入到项目文件目录里面)
另一个 npm run serve (好，它提前说了，这个就是：)
启动您项目的命令，这个命令输入，就可以用浏览器开打里面的vue网页了

在通过window查看一下项目文件位置，如：

四、使用项目及脚手架目录说明

使用之前，打开您的vsCode，直接把创建出的项目文件夹整个拖拽进去。
开始写自己的网页代码，也是用vsCode嘛，现在开打开吧，分享层级目录，双击打开文件看内容，方便一点。前面章节有分享的详细版：安装vsCode及通过vsCode启动网页 篇章

按住文件夹不放 直接拖拽到vdCode里面(您在vsCode修改的代码/操作的文件，也直接同步到文件夹里面)

顺嘴一提，那个package.json 里面就放了很多这个项目的配置信息，查看很方便，您把vsCode打开呗(doge狗头.gif)

从上到下的文件依次为：

node_modules/：存放npm安装的依赖包

public/：公共资源目录，不会被Webpack处理。例如，你可以在这里放置你的index.html文件或者一些不被Webpack处理的静态资源。

src/：源代码目录，包含所有的Vue组件、JavaScript、CSS和图片等资源。
assets/：存放静态资源，如CSS文件、JavaScript文件、图片等。
components/：存放Vue组件。每个组件通常是一个.vue文件。
views/：存放视图组件，通常对应于应用的各个页面。
router/：存放Vue Router的配置，定义应用的路由。
store/：存放Vuex的状态管理配置，适用于大型应用的状态管理。
App.vue：根Vue组件，所有组件的父组件。
main.js：主JavaScript文件，用于创建Vue实例并挂载到DOM上。

babel.config.js：Babel的配置文件，用于编译ES6及以上的JavaScript代码。
postcss.config.js：PostCSS的配置文件，用于处理CSS的转换和优化。
package.json：这个文件包含了项目的元数据（如名称、版本、依赖等）。它由npm管理。
README.md：项目的说明文档，通常包括项目的简介、安装步骤、使用说明等。
vue.config.js：Vue CLI项目特有的配置文件，用于配置webpack等。

有些配置现在用不到，有些配置一直都用不上，说一下几个非常常用也重要的：
package.json(当前项目的配置)：

src目录（以后写代码的地方）：
里面的
main.js【整个项目启动的入口，就是通过命令启动项目之后，还没有点击任何网页的链接，直接localhost:8080 看到的那个页面】

当前是案例代码：
导入了两个vue文件，我们自己写的也是一个xxx.vue(vue文件)，也可以看实际情况是否需要导入。
./App.vue 是当前路径下的vue文件为：App.vue（上面的工程目录有截图，能看到）
则：案例工程 通过命令启动 我们开启网址 看到的是：App.vue编译出来的网页

//main.js里面的三句：
import { createApp } from 'vue'  //通过vue 导入一个 创建APP的方法:createApp 
import App from './App.vue'   //导入当前路径下的App.vue文件 取个变量名字为App

createApp(App).mount('#app') //使用创建APP。创建App对象 影响关联id为app的标签

上一小节 分享说明了 vue文件里面有什么(三个标签组成的文件)，组件式开发

下一小节：
7.如何启动vue项目及vue语法组件化不同标签应对的作用说明
启动项目分享之后，仅仅看核心的那几个配置文件的内容，带着大家去看的一个启动加载顺序(不是从上到下开始看)，能清楚它的工作原理，，，，看完工作原理，立马我们自己修改了标签，重新启动：彻底理解它是怎么运作的

当前可能没有看明白vue工程怎么玩儿的，下一小节，我们实际用起来，启动这个项目。本篇文章就分享 文章标题：
通过node.js里的NPM来创建vue项目
和
项目层级目录说明

总结

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

其他扩展细节知识点，本系列省略了(或者有链接)如：
vue还有一些案例，但是现在案例基本满足大部分情况，下一小节就得组件式写法直接开始开发了。如果您想看完整的vue.js ，请移步去看帮帮志的其他文章 有详细的。毕竟当前我们的目的是：快速手搓一个前后分离的全栈。
vue.js的其他功能及使用，管它*现在*用不用的上，内容全部丢进来。各位看官自行消化。那~可能会很多很多了（又耗时）。当前 系列： 手搓出来之后，您可以自行加功能和内容

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