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

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

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


前言

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


一、vue.js是什么?

二、详细步骤

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项目就创建完成了


三、总结

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

经验分享 程序员 微信小程序 职场和发展