从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目

从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建

参考学习vue官网文档
https://v3.cn.vuejs.org/guide/installation.html#%E5%8F%91%E5%B8%83%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E

一.首先安装Vue CLI

这里安装是通过 npm 进行安装

npm即 Node Package Manager，Node.js 环境中的软件包管理器。随 Node.js 一起被安装。

需要先下载安装 Node.js

下载地址

安装后打开cmd

输入node -v 查看版本
nmp - v

输入 npm -g install npm ，将 npm 更新至最新版本。

可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。

安装 cnpm 的命令为 ：

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后就可以使用 cnpm 替代 npm 了，我不太喜欢用 cnpm，喜欢用的小伙伴注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。

使用 npm install -g vue-cli 安装Vue CLI(脚手架)。

vue-cli 这个构建工具大大降低了 webpack 的使用难度，开箱即用的特性，大大降低了我们的学习成本，加快了我们的开发速度。

二.安装完之后创建项目

在一个磁盘下创建文件

输入 vue create springboot-vue-demo

创建一个名为 springboot-vue-demo的项目
接着选择

接着
选择vue的版本



保存一下
创建工程完毕

输入以上命令启动

http://localhost:8080/ 去浏览器查看

这就是vue工程自带的一个界面