spring boot + vue框架搭建--

时间:2024-03-15 12:25:04

下面是搭建前端框架vue.js的步骤:

1.在官网下载node.js,地址:https://nodejs.org/en/download/ (下载对应的版本),一路默认,进行安装

2.完成后,在安装路径下打开命令窗口,输入node -v,检查版本信息(成功)

3.node.js集成了包管理器npm,所以在node.js安装成功后,可直接通过npm -v查看npm版本信息

4.npm -g install npm可以更新现有的npm版本

5.安装cnpm (自我理解npm为包管理工具,有时需要从http://registry.npmjs.org 下载一些插件包,该网站的服务器在国外,因此避免不了速度慢,cnpm呢就是一个淘宝镜像,实现上述功能但速率快)

spring boot + vue框架搭建--

6.使用cmpn安装vue-cli脚手架,输入命令cnpm install -g vue-cli,安装

spring boot + vue框架搭建--7

7.vue -V,查看vue版本号 (注意,V为大写

spring boot + vue框架搭建--

8.创建项目:在本地新建项目文件夹,通过命令vue init webpack 项目名来创建(注意项目名不支持大写字母,我第一次就输入的大写字母,结果报sorry,确认之后虽然仍显示大写,但后面启动项目时,必须按小写启动,可能是用小写备案了,只是我刚开始写的大写,怕我认不出来所以表面上用大写生成的吧 哈哈)

过程中有一些需要自己选择的项,按上下键选择就行

spring boot + vue框架搭建--

spring boot + vue框架搭建--

9.进入到项目所在目录下,输入cnpm install,安装项目所需的依赖

spring boot + vue框架搭建--

10.运行项目npm run dev

spring boot + vue框架搭建--

11.成功后,提示访问http://localhost:8080

spring boot + vue框架搭建--

 12.访问网址,出现vue.js欢迎界面,至此成功。