SpringBoot+vue项目实战（一）

SpringBoot+vue入门

• SpringBoot+Vue项目实战
• • 一：vue开发
  • • 步骤一：安装node.js
    • 步骤二：安装镜像
    • 步骤三：安装Vue
    • 步骤四：安装全局vue-cli脚手架
    • 步骤五：检查Vue是否安装成功
    • 步骤六：创建一个基于 webpack 模板的新项目（可略）
    • 步骤七:启动项目，访问项目
    • 步骤一：先择file,点击open导入我们的项目
    • 步骤二：引入vue插件
    • 步骤三：新建两个vue文件
    • 步骤四：启动项目
  • 二：SpringBoot项目开发
  • • 步骤1：新建SpringBoot项目
    • 步骤2：springboot的crud
    • 步骤3：启动项目
  • 三：SpringBoot + vue交互

SpringBoot+Vue项目实战

一：vue开发

步骤一：安装node.js

Node.js 官方网站下载：https://nodejs.org/en/
2.选择操作系统对应的包

下载完成，安装包如下：

傻瓜式安装，直接下一步即可
安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：

3.配置npm在安装全局模块时的路径和缓存cache的路径
因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:Users用户名AppDataRoaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示：

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：

npm config set prefix “D: ode ode_cache”

npm config set cache “D: ode ode_cache”
（prefix和cache后跟的是你node_global和node_cache这两个新建的目录，）
执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为“D: ode ode_modules”，如图

最后编辑用户变量里的Path，将相应npm的路径改为：D: ode ode_global，同样如下图：

以上vue的运行环境就建好了，下面开始创建vue项目

步骤二：安装镜像

由于 npm install安装速度慢，所以本文使用阿里淘宝镜像及其命令 cnpm进行安装，cmd打开命令窗口输入命令：

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

步骤三：安装Vue

输入：cnpm install vue ，回车等待终端给出响应。

步骤四：