SpringBoot+Vue 博客系统（七）：Blog前端Vue项目的搭建

怼烎@ 2023-10-11 23:12 21阅读 0赞

> 签名：但行好事，莫问前程。

#### 文章目录 ####

*  一、安装Node.js
 *   *  1、下载node.js
     *  2、检查node.js版本
 *  二、安装Vue CLI
 *   *  1、安装命令行工具（CLI）
     *  2、安装注意事项
 *  三、创建Vue初始化项目
 *   *  1、创建项目
     *  2、项目结构
     *  3、启动项目
     *  4、访问项目
 *  四、码云创建前端代码仓库
 *   *  1、将本地代码提交到码云管理
     *  2、用VS Code拉取前端代码进行开发
     *   *  2.1拉取代码
         *  2.2用VS Code打开该文件夹
         *  2.3测试CS Code提交代码
 *  总结

--------------------

![在这里插入图片描述][d88844e479414c36acc0dc58f278ccd4.png]

## 一、安装Node.js ##

### 1、下载node.js ###

下载地址：[https://nodejs.org/zh-cn/][https_nodejs.org_zh-cn]

![在这里插入图片描述][a30adafd3ddb42e3a7a867110d888cf5.png]  
去官网直接下载安装。

### 2、检查node.js版本 ###

打开CMD窗口，输入命令

node -v

![在这里插入图片描述][83adea7e3a944e09a36b7fa033394094.png]  
出现版本号则说明安装成功。

## 二、安装Vue CLI ##

### 1、安装命令行工具（CLI） ###

![在这里插入图片描述][bb1fa206a35b47059991f73c056ee0cd.png]  
Vue CLI官网地址：[https://cli.vuejs.org/zh/index.html][https_cli.vuejs.org_zh_index.html]

![在这里插入图片描述][9f779c74cbfc426ebb16d5c9283120b3.png]  
安装CLI页面

![在这里插入图片描述][024c34ee3cfc4f73a17d6e99d6dc1432.png]

### 2、安装注意事项 ###

Node 版本要求：Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

![在这里插入图片描述][a0766483dec444ceaeeafa0960a9ff50.png]

## 三、创建Vue初始化项目 ##

### 1、创建项目 ###

来到D盘 D:\\WebSpace 目录下（具体前端工作目录自行创建）  
![在这里插入图片描述][9b80c8907eab4eeebfacd2b88f94f941.png]  
打开CMD控制台输入命令 vue init webpack yangcunle-blog-web

vue init webpack yangcunle-blog-web

![在这里插入图片描述][a8f60d1887b146aaacf48766c34a4245.png]

输入y，一路回车就OK了

![在这里插入图片描述][c31ac362d87c4cf3ac9e2429df44d229.png]

看到这个界面就是项目初始化完成了

![在这里插入图片描述][289d0a401b2b4397b8b9909c0006fdfc.png]

### 2、项目结构 ###

![在这里插入图片描述][368f88a0d4c04f06abaa96f45ea842c8.png]

### 3、启动项目 ###

打开VS Code 输入命令：npm run dev

![在这里插入图片描述][b98a447d0ded44cbbb938de1fe863b12.png]  
初次运行会加载一系列依赖，等看到这个界面就是启动成功

### 4、访问项目 ###

在浏览器输入：http://localhost:8080 即可访问

![在这里插入图片描述][8df2b13e0f5c48aea6252e045e7573fc.png]

看到这个界面，项目初始化和访问就成功了

## 四、码云创建前端代码仓库 ##

![在这里插入图片描述][ebb3fe0df5aa43f2b4e2dfd3f45329eb.png]

### 1、将本地代码提交到码云管理 ###

![在这里插入图片描述][82aa4f5115b448d48ab37582aa754757.png]

### 2、用VS Code拉取前端代码进行开发 ###

#### 2.1拉取代码 ####

![在这里插入图片描述][ae3c8b96825844c1ba65e93fec1c0944.png]

执行完之后，代码就拉取到本地了

![在这里插入图片描述][8c508daceeb3498296b4e521846dfc94.png]

#### 2.2用VS Code打开该文件夹 ####

![在这里插入图片描述][bb77be521e7f42268b8e641d3343e2d3.png]

打开后，项目就显示已经被git管理了

#### 2.3测试CS Code提交代码 ####

![在这里插入图片描述][89953f69dd75415facae859109482e05.png]

![在这里插入图片描述][bacdab34e2a94541a34a8c3d9b1ca61c.png]

提交成功

--------------------

## 总结 ##

以上记录了前端Vue项目的从0开始搭建过程、包括安装node.js坏境、安装vue cli 、初始化项目、然后提交代码到码云。如果对你有所帮助，请一键三连。

[d88844e479414c36acc0dc58f278ccd4.png]: https://img-blog.csdnimg.cn/d88844e479414c36acc0dc58f278ccd4.png
[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[a30adafd3ddb42e3a7a867110d888cf5.png]: https://img-blog.csdnimg.cn/a30adafd3ddb42e3a7a867110d888cf5.png
[83adea7e3a944e09a36b7fa033394094.png]: https://img-blog.csdnimg.cn/83adea7e3a944e09a36b7fa033394094.png
[bb1fa206a35b47059991f73c056ee0cd.png]: https://img-blog.csdnimg.cn/bb1fa206a35b47059991f73c056ee0cd.png
[https_cli.vuejs.org_zh_index.html]: https://cli.vuejs.org/zh/index.html
[9f779c74cbfc426ebb16d5c9283120b3.png]: https://img-blog.csdnimg.cn/9f779c74cbfc426ebb16d5c9283120b3.png
[024c34ee3cfc4f73a17d6e99d6dc1432.png]: https://img-blog.csdnimg.cn/024c34ee3cfc4f73a17d6e99d6dc1432.png
[a0766483dec444ceaeeafa0960a9ff50.png]: https://img-blog.csdnimg.cn/a0766483dec444ceaeeafa0960a9ff50.png
[9b80c8907eab4eeebfacd2b88f94f941.png]: https://img-blog.csdnimg.cn/9b80c8907eab4eeebfacd2b88f94f941.png
[a8f60d1887b146aaacf48766c34a4245.png]: https://img-blog.csdnimg.cn/a8f60d1887b146aaacf48766c34a4245.png
[c31ac362d87c4cf3ac9e2429df44d229.png]: https://img-blog.csdnimg.cn/c31ac362d87c4cf3ac9e2429df44d229.png
[289d0a401b2b4397b8b9909c0006fdfc.png]: https://img-blog.csdnimg.cn/289d0a401b2b4397b8b9909c0006fdfc.png
[368f88a0d4c04f06abaa96f45ea842c8.png]: https://img-blog.csdnimg.cn/368f88a0d4c04f06abaa96f45ea842c8.png
[b98a447d0ded44cbbb938de1fe863b12.png]: https://img-blog.csdnimg.cn/b98a447d0ded44cbbb938de1fe863b12.png
[8df2b13e0f5c48aea6252e045e7573fc.png]: https://img-blog.csdnimg.cn/8df2b13e0f5c48aea6252e045e7573fc.png
[ebb3fe0df5aa43f2b4e2dfd3f45329eb.png]: https://img-blog.csdnimg.cn/ebb3fe0df5aa43f2b4e2dfd3f45329eb.png
[82aa4f5115b448d48ab37582aa754757.png]: https://img-blog.csdnimg.cn/82aa4f5115b448d48ab37582aa754757.png
[ae3c8b96825844c1ba65e93fec1c0944.png]: https://img-blog.csdnimg.cn/ae3c8b96825844c1ba65e93fec1c0944.png
[8c508daceeb3498296b4e521846dfc94.png]: https://img-blog.csdnimg.cn/8c508daceeb3498296b4e521846dfc94.png
[bb77be521e7f42268b8e641d3343e2d3.png]: https://img-blog.csdnimg.cn/bb77be521e7f42268b8e641d3343e2d3.png
[89953f69dd75415facae859109482e05.png]: https://img-blog.csdnimg.cn/89953f69dd75415facae859109482e05.png
[bacdab34e2a94541a34a8c3d9b1ca61c.png]: https://img-blog.csdnimg.cn/bacdab34e2a94541a34a8c3d9b1ca61c.png