基于vue.js+springboot的毕业设计（vue项目创建）

基于vue.js+springboot的毕业设计（vue项目创建）

vue.js的搭建以及node.js的安装

文章目录

• 基于vue.js+springboot的毕业设计（vue项目创建）
• 前言
• 一、vue.js是什么？
• 二、详细步骤
• • 1.安装工具介绍
  • 2.node.js环境安装
  • 3.vue-cli 脚手架构建工具安装
  • 4.创建vue前端项目
• 三、总结

前言

本次毕业设计中第一次自己完成一整个项目，所有感觉很有趣，于是想着记录下来了。

一、vue.js是什么？

vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。这里我自己用的是NPM的安装方法，另外还有两种其他的方法，分别是CDN方法和独立版本。这里我就不详细讲了，想了解的伙伴可以自己去了解一下。

二、详细步骤

1.安装工具介绍

node.js环境（自带npm包管理器）
vue-cli 脚手架构建工具

2.node.js环境安装

1.下载对应你系统的Node.js版本:https://nodejs.org/en/download/

这里尽量选择msi安装程序下载也就是傻瓜式安装。
2.安装完成过后检查是否安装成功
在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口，输入node -v 和npm -v，如下图出现版本号则为安装成功。

3.vue-cli 脚手架构建工具安装

vue-cli（命令行工具 (CLI)）主要作用则是为单页面应用 (SPA) 快速搭建繁杂的脚手架
1.安装vue-cli工具，依旧打开cmd窗口输入命令npm install -g vue-cli（以为在安装node.js时，自带了npm管理器，所以可以直接在cmd界面输入安装命令）

同样检查是否安装成功输入命令 vue -V出现相应的版本号说明安装成功

安装完成过后我们所要搭建vue的环境就安装成功了,接下来就是创建第一个vue前端项目HelloWorld！

4.创建vue前端项目

同样进入cmd窗口输入安装命令vue create hello-world（其中hello-world则是创建的文件名）

这里输入命令过后，提示我们链接npm注册表的速度很慢，问我们是否通过链接安装，这里输入y就可以了。输入过后你会被提示选取一个 preset 这里选取Default （【Vue 3】 babel, eslint）然后等待创建完成即可。

这里由于没有设置创建目录所以 需要cd一下查看文件夹位置

然后打开文件夹

加可以看到创建的项目了。然后输入npm run serve运行项目

这样我们的第一个vue项目就创建完成了

三、总结

其实环境安装和前端项目创建部署我也是第一次做并没有碰到什么问题，而且相对于后端框架来说更加简单。下一期我就开始部署后端框架了。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！